expand erste Div, wenn zweite div oder dritte div kollabiert mit jquery

Question

Ich habe drei Divs. Hier ist mein Code.

<div class="div1">Div1 Content</div> 
<div class="div2">Div2 Content</div> 
<div class="div3">Div3 Content</div> 

Mit jQuery wie kann ich Div1 erweitern, wenn Div2 oder Div3 zusammenbrach?

Answer 1

Ich denke, das ist, was Sie suchen.

Bitte überprüfen Sie diese Fiddle

HTML

<div id="accordion"> 
<h3>Div1</h3> 
<div><p>Div1 Content</p></div> 
<h3>Div2</h3> 
<div><p>Div2 Content</p></div> 
<h3>Div3</h3> 
<div><p>Div3 Content</p></div> 
</div> 

JS

$(document).ready(function(){ 
    $("#accordion").accordion({ 
     collapsible: true 
    }); 

    $('.ui-accordion-header').click(function(){ 
      if ($("#accordion").find(".ui-accordion-header-active").length == 0) { 
     $("#accordion").find(".ui-accordion-header").eq(0).click(); 
     } 
    }); 
}); 

Answer 2

bearbeiten, nachdem Kommentar von OP DEMO

checkForDiv1 = function(){ // function to check the requirement and do things accordingly 
    if($('.div.expand').length == 0){ // check for expand class div 
     $('.div1').addClass('expand') 
    }else{ 
     $('.div1').removeClass('expand') 
    } 
}; 

$('.div').click(function(){ 
    $(this).toggleClass('expand'); 
    checkForDiv1(); // check the requirement and do the required 
}); 

checkForDiv1(); // call it to make it initially expanded 

---

Wenn Sie mit Ihrem HTML gehen möchten und ändern Sie es nicht, diese

DEMO

$('div').click(function(){ 
    $('div').not($(this)).removeClass('expand'); // you remove class expand from all except the one which is clicked 
    $(this).addClass('expand') // add expand class to the one which is clicked 
}); 

css helfen kann

div { 
    height:30px; // initial height required for transitions 
    transition: all 1s ease // some smooth transitions 
} 
.expand { 
    height: 200px; 
    background:red; 
}