How can I expand and collapse a <div> using javascript?

I have created a list on my site. This list is created by a foreach loop that builds with information from my database. Each item is a container with different sections, so this is not a list like 1, 2, 3... etc. I am listing repeating sections with information. In each section, there is a subsection. The general build is as follows:

<div>
    <fieldset class="majorpoints" onclick="majorpointsexpand($(this).find('legend').innerHTML)">
    <legend class="majorpointslegend">Expand</legend>
    <div style="display:none" >
        <ul>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

So, I am trying to call a function with onclick="majorpointsexpand($(this).find('legend').innerHTML)"

The div I am trying to manipulate is style="display:none" by default, and I want to use javascript to make it visible on click.

The "$(this).find('legend').innerHTML" is attempting to pass, in this case, "Expand" as an argument in the function.

Here is the javascript:

function majorpointsexpand(expand)
    {
        if (expand == "Expand")
            {
                document.write.$(this).find('div').style = "display:inherit";
                document.write.$(this).find('legend').innerHTML = "Collapse";
            }
        else
            {
                document.write.$(this).find('div').style = "display:none";
                document.write.$(this).find('legend').innerHTML = "Expand";
            }
    }

I am almost 100% sure my problem is syntax, and I don't have much of a grasp on how javascript works.

I do have jQuery linked to the document with:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

In the <head></head> section.

Solution 1:

Okay, so you've got two options here :

Use jQuery UI's accordion - its nice, easy and fast. See more info here
Or, if you still wanna do this by yourself, you could remove the fieldset (its not semantically right to use it for this anyway) and create a structure by yourself.

Here's how you do that. Create a HTML structure like this :

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

With this CSS: (This is to hide the .content stuff when the page loads.

.container .content {
    display: none;
    padding : 5px;
}

Then, using jQuery, write a click event for the header.

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Here's a demo : http://jsfiddle.net/hungerpain/eK8X5/7/

Solution 2:

how about:

jQuery:

$('.majorpoints').click(function(){
    $(this).find('.hider').toggle();
});

HTML

<div>
  <fieldset class="majorpoints">
    <legend class="majorpointslegend">Expand</legend>
    <div class="hider" style="display:none" >
        <ul>
            <li>cccc</li>
            <li></li>
        </ul>
    </div>
</div>

Fiddle

This way you are binding the click event to the .majorpoints class an you don't have to write it in the HTML each time.