развернуть первый div, когда второй div или третий div рухнул с использованием jquery

Question

У меня есть три div. Вот мой код.

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

Использование jQuery Как я могу развернуть div1, если div2 или div3 рухнули?

Answer 1

Я думаю, что это то, что вы ищете.

Пожалуйста, проверьте этот 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

Редактировать после комментария от 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 

---

Если вы хотите перейти с HTML и не изменяя его, это может помочь

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

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