Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

williamrossi
williamrossi
6,232 Points

Click to reveal, lots of P tags!

Hello all, I'm trying to hide and show some text!

the feed spits out loads of text in <p> tags.

I want to let 3 sets of P tags show and then reveal the full list of them when you click on the link at the bottom.

here is my code

<div class="excerpt"> <h1 class="header-icons">EXCERPT</h1> <p></p><p> lorem ipsum.</p>

<!--***********************************************************************************************************
 I WANT TO CUT THE HIDE ALL THE P TAGS FROM BELOW THIS! AND THEN SHOW THEM ONCE CLICK AT THE BOTTOM IS CLICKED 
************************************************************************************************************** -->
<p>lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum..</p>


<p>lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum..</p>

<p>lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum.lorem ipsum..</p>
<a class="read-full" href="read-fill">Read full excerpt</a>

</div>

7 Answers

williamrossi
williamrossi
6,232 Points

great! 95% there lol is there a way I can give the class open to p tags with jquert after it counts the first three? As it is being fed through a text editor and I can't give them classes manually.

Patryk Nowak
Patryk Nowak
14,102 Points

Quick tip :)

p {
display: none;
}
$('.read-full').click(function(){
$('p').show();
})
williamrossi
williamrossi
6,232 Points

i want to show the first 3 sets of p tags though? they are all contaiend in one DIV.

williamrossi
williamrossi
6,232 Points

lol thanks but What I want to do is to have the first 3 <p> tags showing.... Then when you click the link, the rest of container is shown.

So I need some kind of an array or counter or something.

Patryk Nowak
Patryk Nowak
14,102 Points

http://jsbin.com/vineyixu/3/edit Something like that? :) Or I still don't get your idea? :)

williamrossi
williamrossi
6,232 Points

yes ! :0} thats very nearly what i want lol the only thing is the tags that come through are going to be just plain p tags as they are being fed through a very basic text editor so what comes out will be looking like this

<div class="excerpt"> <h1 class="header-icons">EXCERPT (this to be shown too)</h1> <p>I want this to show from start</p> <p>I want this to show from start</p> <p>I want this to show from start start</p> <p>I want this to show when button read-full is clicked</p> <p>I want this to show when button read-full is clicked</p> <p>I want this to show when button read-full is clicked</p> <p>I want this to show when button read-full is clicked</p> <a class="read-full" href="#">Read full excerpt</a> </div>

So I will need to use some jquery to assign a class to every p tag after it counts 3? something like that?

Thanks for your help by the way!

Patryk Nowak
Patryk Nowak
14,102 Points

Put your code into jsbin.com, jsfiddle.net or codepen.io :)

williamrossi
williamrossi
6,232 Points

yes! That is exactly what I need! thank you so much! I need to get off the fancy Sass techniques and get some jquery under my belt!