javascript - ExpandCollapse div by clicking another - Stack Overflow

admin管理员组

文章数量:1310297

I'm looking to create a div that expands and collapses when a pletely separate, non-parent div element is clicked.

Below is an example of an expanding/collapsing effect I like and have been messing around with. I am unsure how best to modify the code below so that I could, say, click on a div located in a sidebar, and cause another div located below the header say, to expand/collapse, pushing all content below it downwards.

The contents of the expanding/collapsing div in question might be a search bar for instance, which can be shown/hidden by the user by clicking on a sidebar button.

$(".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";
        });
    });

});

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

<script src=".9.1/jquery.min.js"></script>

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

    </div>
    <div class="content">
        <ul>
            <li>I'm putting a search bar here.</li>
            
        </ul>
    </div>
</div>

I'm looking to create a div that expands and collapses when a pletely separate, non-parent div element is clicked.

Below is an example of an expanding/collapsing effect I like and have been messing around with. I am unsure how best to modify the code below so that I could, say, click on a div located in a sidebar, and cause another div located below the header say, to expand/collapse, pushing all content below it downwards.

The contents of the expanding/collapsing div in question might be a search bar for instance, which can be shown/hidden by the user by clicking on a sidebar button.

$(".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";
        });
    });

});

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

    </div>
    <div class="content">
        <ul>
            <li>I'm putting a search bar here.</li>
            
        </ul>
    </div>
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Feb 8, 2016 at 6:01 Thomas asked Feb 8, 2016 at 5:57 ThomasThomas 2311 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

$(".header").click(function() {
  $('.content').slideToggle().toggleClass('active');
  if ($('.content').hasClass('active')) {
    $('.header span').text('Collapse');
  } else {
    $('.header span').text('Expand');
  }
});
$('button').click(function(){
	$(".header").trigger('click');
})

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

    </div>
    <div class="content">
        <ul>
            <li>I'm putting a search bar here.</li>
            
        </ul>
    </div>
</div>
  <button>another click</button>

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

    
    //getting the content 
    $content = $(".content")
    //open up the content - 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";
        });
    });

});

.container {
    width:100%;
    border:1px solid #d3d3d3;
}
.container div {
    width:100%;
}
.container .header {
    background-color:#d3d3d3;
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding : 5px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>

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

    </div>
    <div class="content">
        <ul>
            <li>I'm putting a search bar here.</li>
            
        </ul>
    </div>
<div class="toggle">click me</dov>
</div>

本文标签： javascriptExpandCollapse div by clicking anotherStack Overflow