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.
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.
Share Improve this question asked Jul 15, 2011 at 20:59 Seungho YangSeungho Yang 251 silver badge5 bronze badges 1- Thank you everyone for your answers. I really appreciate your help. – Seungho Yang Commented Jul 15, 2011 at 21:14
4 Answers
Reset to default 6Well 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!
Use toggle.
$('h1').bind('click', function(){
$('p').toggle();
});
DEMO
<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 toggles 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.
Try this
$("h1").click(function(){
$("p").slideToggle(500);
});