0

read more と show less のスタイルをどのように設定すればよいでしょうか? #tag1 をスタイリングしようとしましたが、これは最初に表示される「続きを読む」テキストを変更するだけです

JSはこちら

<script>
function toggleAndChangeText(divId, tagId) {
     $("#"+divId).toggle();
     if ($("#"+divId).css('display') == 'none') {
          $('#'+tagId).html('Read More <i class="icon-circle-arrow-down"></i>');
     }
     else {
          $('#'+tagId).html('Show Less <i class="icon-circle-arrow-up"></i>');
     }
}

そしてhtml

        <a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
        <p>Read More <i class="icon-circle-arrow-down"></i></p> </a>

各セクションのテキストは次のようになります...

ここに画像の説明を入力

最初のものは、最初にボタンを見たときです。次に、ユーザーがそれをクリックすると、「Show Less」が表示されます。ボタンが左にあり、下部のパディングが少ないことがわかります。その後、ユーザーが [表示を減らす] ボタンを閉じると、[続きを読む] が表示されますが、[表示を減らす] と同じ位置に留まります。

私の質問は、インタラクティブな read more/show less をスタイリングして、最初の read more の位置に配置するにはどうすればよいですか? これが混乱している場合は申し訳ありません！

4

2 に答える 2

0

スタイル: 

<style>
    #open{
    display: none;}
    </style>

HTML:

<p id="open">Content goes here</p>

<a href="javascript:void(0);" id="click1"><span class="text"><strong>Read More</strong><img src="icon-show.png" /></span><span class="text" style="display:none;"><strong>Show less</strong><img src="icon-hide.png" /></span></a>

Javascript:

 <script type="text/javascript">
    $(document).ready(function() {
    $('a#click1').click(function() {
      $('p#open').slideToggle();

    $('span.text').toggle();
       return false;
        });
         });
        </script>
于 2013-07-25T15:22:02.510 に答える