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.

Answer 1

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!