djmhim djmhim - 5 months ago 9
HTML Question

Want to see some words before open slideToggle

I want to show 1st 20-30 words even on closed Toggle. My code is bellow.

On output page, I want to few words of it output 1st and then when someone click on icon or button, it should show complete content and when click again, it should again show 1st 20-30 words...

Please help me..

JS Code is mention below:

$(document).ready(function(){
$("a#abdptext13").click(function(){
$("#abpanel13").slideToggle(1000);
return false;
});
});


Css is like this

#abpanel13{
padding: 10px;
display: none;
max-width:600px;
padding-left:25px;
text-align:justify;}


HTML Code :

<div>
<a href="#droptext" id="abdptext13"><img src="images/textdrop_03.png" width="35" height="62" align="right" id="flip"></a>
</div>
<div id="abpanel13">
Click to slide down panelClick to slide down panelClick to slide down
panelClick to slide down panelClick to slideClick to slide down panelClick
to slide down panelClick to slide down panelClick to slide down panelClick
to slideClick to slide down panelClick to slide down panelClick to slide
down panelClick to slide down panelClick to slideClick to slide down
panelClick to slide down panelClick to slide down panelClick to slide down
panelClick to slideClick to slide down panelClick to slide down panelClick
to slide down panelClick to slide down panelClick to slideClick to slide
down panelClick to slide down panelClick to slide down panelClick to slide
down panelClick to slideClick to slide down panelClick to slide down
panelClick to slide down panelClick to slide down panelClick to slideClick
to slide down panelClick to slide down panelClick to slide down panelClick
to slide down panelClick to slideClick to slide down panelClick to slide
down panelClick to slide down panelClick to slide down panelClick to slide
</div>


Thanks a lot in Advance

Answer

This snippet may satisfy your requirement.

$(document).ready(function(){
  var content = $("#abpanel13").html();
  var c = content.substr(0, 30);
  $("#abpanel13temp").html(c);
 $("a#abdptext13,#abpanel13temp").click(function(){
    $("#abpanel13").slideToggle(1000);
    
    $("#abpanel13temp").slideToggle(0);
    return false;
  });
});
#abpanel13{
padding: 10px;
display: none;
max-width:600px;
padding-left:25px;
text-align:justify;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#droptext" id="abdptext13">Click Here</a>
</div>
<div id="abpanel13temp">
</div>
<div id="abpanel13">
Click to slide down panelClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slideClick to slide down panelClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slideClick to slide down panelClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slideClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slide down  
panelClick to slideClick to slide down panelClick to slide down panelClick 
to slide down panelClick to slide  down panelClick to slideClick to slide 
down panelClick to slide down panelClick to slide down panelClick to   slide 
down panelClick to slideClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slideClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slide  down panelClick to slideClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slide down panelClick to slide
 </div>

Comments