尋找「顯示更多」「隱藏」javascript/jquery

我一直在谷歌搜索這一整天，基本上我有一個字段，可以有任何地方從50到500個字符，所以我正在尋找一個腳本，允許我一次顯示200個（例如）閱讀更多鏈接以擴展剩餘內容，到目前爲止，我發現的最接近的是（見下面的代碼），但是需要手動分離內容，而不是真正的可能..尋找「顯示更多」「隱藏」javascript/jquery

<p>...This is all visible content... 
<a href="#" id="example-show" class="showLink" 
onclick="showHide('example');return false;">See more.</a> 
</p> 
<div id="example" class="more"> 
    <p>...This content is hidden by default...</p> 
<p><a href="#" id="example-hide" class="hideLink" 
onclick="showHide('example');return false;">Hide this content.</a></p>

哪裏需要這樣的東西..

<div class="hidden"><?php $rows['content']; ?></div>

即使有非腳本PHP方式來做到這一點，我會很高興。

來源

2013-07-19 user2571547

很多工作要做，這在那裏的時間（毫秒）：HTTP：/ /stackoverflow.com/questions/2717181/cut-text-after-x-amount-of-characters並通過http://stackoverflow.com/search?q=truncate+string+php –

http://viralpatel.net /博客/動態縮短文本出現，更多的鏈接，jQuery的/ –

的Html

<div class="box"> 
    <p id="id_full_text" class="class_full_text"> 
     Full Text 
    <p> 
    <a href="id_link_show_more" class="class_link_show_more">Show more</a> 
    <p id="id_hide_text" class="class_hide_text"> 
    Hide Text 
    <p> 
    <a href="id_link_hide" class="class_link_hide">Hide more</a> 
</div>

CSS

.class_hide_text, .class_link_hide {display: none;}

jQuery的（在你剛剛1在同一頁）

$('#id_link_show_more').click(function() { 
    $('#id_full_text').hide(); // hide fullText p 
    $('#id_link_show_more').hide(); //hide show button 
    $('#id_hide_text').show('100'); // Show HideText p 
    $('#id_link_hide').show('100'); // show link hide 
}); 
$('#id_link_hide').click(function() { 
     $('#id_link_hide').hide(); // hide link hide 
     $('#id_hide_text').hide(); // hide the hide Text 
     $('#id_link_show_more').show('100'); //show ths show button 
     $('#id_full_text').show('100'); // show fullText 

    });

jQuery的（如果你有超過1在同一頁面，因爲你不想打開所有的隱藏在頁面電郵的div）

$('.class_link_show_more').click(function() { 
    var the_parent = $(this).parent(); 
    the_parent.children('.class_full_text').hide(); // hide fullText p 
    the_parent.children('.class_link_show_more').hide(); //hide button 
    the_parent.children('.class_link_hide').show('100'); // Show HideText p 
    the_parent.children('.class_hide_text').show('100'); // Show HideText p 

}); 
$('.class_link_hide').click(function() { 
    var the_parent = $(this).parent(); 
    the_parent.children('.class_link_hide').hide(); // hide link hide 
    the_parent.children('.class_hide_text').hide(); // hide hide text p 
    the_parent.children('.class_link_show_more').show('100'); //Show link show 
    the_parent.children('.class_full_text').show('100;); // show full text 
});

注意：入戲（X）的數量來顯示DIV的方式

來源

2013-07-19 03:10:38

尋找「顯示更多」「隱藏」javascript/jquery

回答

相關問題