樣式化javascript函數*顯示/隱藏* CSS/HTML/JS

Question

我將如何更多地閱讀樣式並顯示更少？香港專業教育學院試過造型＃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> 

這裏是什麼文本看起來像在每個部分...

第一個是當你第一次看到按鈕。 然後用戶點擊它並顯示'顯示更少'，你可以看到按鈕位於左側，而底部的填充較少。當用戶然後關閉顯示減少按鈕時，閱讀更多出現，但保持在與顯示更少相同的位置。

我的問題是我將如何去造型交互式閱讀更多/顯示較少的人，所以他們在第一次閱讀更多的位置？對不起，如果這是混亂！

Answer 1

嘗試：

$('#'+tagId).html('<p>Read More <i class="icon-circle-arrow-down"></i></p>'); 

我猜你有你的段落

其實填充或保證金，你要替換

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

通過

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

Answer 2

這將幫助你： 風格：

<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>