Minimize and Maximum one Div when many are displayed

Question

I made an update to someone's coding at How to maximize and minimize a div.

I wanted to see if I can populate various listings below each other and depending on which one selected, it will maximize or minimize.

However, when testing this, only the first one will work. Any reason this is so?

https://jsfiddle.net/Qy6Sj/1887/

Coding:

$("#max_min_button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
}
else{
    $(this).html("-");
}
$("#news_body").slideToggle();
});

I have tested some of the coding found at minimize maximize the div ? javascript or jquery which works for all the div but it wasn't working.

I tried this code example at http://wpapi.com/minimize-restore-maximize-hide-functionality-javascript-jquery/ but it didn't work either.

The first issue is that `id` should only represent one element on the page. No two elements should have the same `id`. — hopkins-matt, Aug 12 '15 at 18:02

score 4 · Accepted Answer · answered Aug 12 '15 at 18:11

I have restructured your html & css slightly and rewritten the jQuery/JS to find the next news_body and toggle it.

HTML:

<div class="weekly-news">
    <div class="title_bar">Energy Group guidelines
        <div class="max_min_button">-</div>
    </div>
    <div class="news_body">Hi welcome!</div>
</div>
<div class="weekly-news">
    <div class="title_bar">Energy Group brand
        <div class="max_min_button">-</div>
    </div>
    <div class="news_body">Hi welcome!</div>
</div>

CSS:

.weekly-news{
    width:600px;
    border:solid 1px;
}

.title_bar{
    background: #FEFEFE;
    height: 25px;
    width: 100%;
}
.max_min_button{
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
}
.news_body{
    height: 250px;
    background: #DFDFDF;
}

JS:

$(".max_min_button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    var thisParent = $(this).parent();
    $(thisParent).next(".news_body").slideToggle();
});

DEMO: JSFiddle

I see the change you made. I forgot that IDs are suppose to be unique. I feel kind of silly :/ . however the thisParent coding I wasn't aware of so I appreciate the change. It works amazingly — narue1992, Aug 12 '15 at 18:15
No problem at all. We've all messed ids and classes plenty of times. — hopkins-matt, Aug 12 '15 at 18:16

Minimize and Maximum one Div when many are displayed

1 Answers1