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?

/

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 / but it didn't work either.

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/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./minimize-restore-maximize-hide-functionality-javascript-jquery/ but it didn't work either.

• javascript
• jquery
• html
• minimize

• 2 The first issue is that id should only represent one element on the page. No two elements should have the same id. – hopkins-matt Commented Aug 12, 2015 at 18:02
• I forgot that ids are unique O.o – narue1992 Commented Aug 12, 2015 at 18:14

1 Answer 1

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 wele!</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 wele!</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