show / hide paragraph in jquery

Post a Reply

Replies

Oldest  Newest  Rating
0 Casper Hollemans · September 17, 2015
you are doing it way to hard

use the .toggle(), remind to set ur class/id hidden in the css file

http://www.w3schools.com/jquery/eff_toggle.asp

-Greets
0 Brotsky Tv · September 18, 2015
Try like this :


First of all, you have to identify your different buttons, if you use the "button" class, you will always refer to the all 3 buttons.
Also you don't need to put a div element inside a p element.
So you can do something like this:
<div id="btn1" class="button"><a href="#">More..</a></div>
<div id="btn2" class="button"><a href="#">More..</a></div>
<div id="btn3" class="button"><a href="#">More..</a></div>  


<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>

Then, javascript:
$(document).ready(function () {

   $("p").hide();

   $("#btn1").click(function(){
        $("#p1").toggle();
   });

   $("#btn2").click(function(){
        $("#p2").toggle();
   });

   $("#btn2").click(function(){
        $("#p2").toggle();
   });
});


For more HTML/CSS tutorials :  https://www.brotsky.tv/category/html/
0 Rehman . · September 18, 2015
@casper but i don't want to hide the paragraph i wanted to show some lines and after pressing the button it should show the full para
0 Rehman . · September 18, 2015
You both are doing toggle, can we show some part of para and show / hide the next part with toggle ?
It doesn't seem to work for me it has just a single function can we manipulate it?
0 Casper Hollemans · September 18, 2015
aaaah like that you could do this:

<p id="someid">
begin of para.............................
<div class="showpar">
the rest of para
</div>
</p>

I'd only show the title of the article and when somone clicks on the title then toggle the rest
that's also a solution
or you'll be writing some javascript what is going to give you a big headache :P

like declare every article then split the article after idk some number of chars
then put both in a var and for after that i guess you know what i mean else i have to type to much xD

hope it helps

-Greets 
  • 1

HTML / CSS / Web Design

107,340 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators