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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

jquery - 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:05:45+0000

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/

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags