Expand <p> when <h1> is clicked
Question
I want to do a very simple expand/collapse using JavaScript where when I click "Title", it shows "Text" (which is hidden when the page first loads). Furthermore, when I click on the "Title" again, I want "Text" to get hidden again.
<div>
<h1>Title</h1>
<p>Text</p>
</div>
I've never used jQuery or JavaScript before so it would be great if you can explain just a little bit about how this toggle code works. Thanks.
4 answers
solution1
6 ACCPTED 2011-07-15 21:01:46
Well this should do it:
$(function() {
$('h1').click(function() {
$(this).next('p').toggle();
});
});
So now let me explain the code.
The first line is accepting a function that will run when the document has finished loading. It is equivalent to:
$(document).ready(function() {
// Stuff to do when the document is ready.
});
The code in the middle says, for every h1 element, when it gets clicked, execute a function that finds the p element next to it and toggle its visibility. The this in the first selector refers to the actual <h1> DOM element. I did it this way so if you had a structure like the following, the toggling would only affect the content next to the paragraphs.
<div>
<h1>Section 1</h1>
<p>Section 1 Content</p>
</div>
<div>
<h1>Section 2</h1>
<p>Section 2 Content</p>
</div>
Cheers!
solution2
1 2011-07-15 21:01:17
Use toggle .
$('h1').bind('click', function(){
$('p').toggle();
});
solution3
1 2011-07-15 21:03:05
<head>
<!-- other content, including jQuery script tag -->
<script type="text/javascript">
$(function(){ // trigger when document's ready
// hide the pragraph initially
$('p').hide();
// add a click event to the header so we can hide/show the paragraph
$('h1').click(function(e){
// $(this) is the header, next finds the next paragraph sibling (they're both
// withint he div, so the header and div are known as siblings) then toggle
// toggles if this found paragraph should be shown or hidden
$(this).next('p').toggle();
});
});
</script>
</head>
Clicking on the DIV instructs jQuery to find the "next" element that's a paragraph (since the header and paragraph are siblings of the same node) then toggle s it.
I've also added a hide in the code as, in my opinion, it's best to hide content from within javascript so in the event they don't support javascript, there's no missing content. Others use CSS styles and only show with javascript, which is fine, but if they don't have or disable JS on the page, there's no way to view that content again.
solution4
0 2011-07-15 21:01:47
Try this
$("h1").click(function(){
$("p").slideToggle(500);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.