Как управлять div с помощью jquery?

Question

У меня есть три div с col-md-2, col-md-8 and col-md-2.

то, что я хочу, чтобы по нажатию кнопки в col-md-8 DIV как остальной DIV должны скрывать и col-md-8 ДИВ занимают полное col-md-12 пространство.

снова щелкать кнопку в col-md-8 DIV оба col-md-2 DIV появляются снова и centeral col-md-8 ДИВ занимают пространство col-md-8.

Является ли это достижимо JQuery, если да, то как и в случае, если нет, то что я должен делать? С уважением

Answer 1

Да, вы можете это сделать. Вот фрагмент, который показывает вам способ его достижения. Надеюсь, это поможет!

$("#mybutton").click(function() { 
 
    if ($("#two").hasClass("col-xs-8")) { 
 
    $("#one").hide(); 
 
    $("#three").hide(); 
 
    $("#two").removeClass("col-xs-8"); 
 
    $("#two").addClass("col-xs-12") 
 
    } 
 
    else { 
 
    $("#one").show(); 
 
    $("#three").show(); 
 
    $("#two").removeClass("col-xs-12"); 
 
    $("#two").addClass("col-xs-8") 
 
    } 
 
});

#one { 
 
    background: red; 
 
    height: 50px; 
 
} 
 

 
#two { 
 
    background: blue; 
 
    height: 50px; 
 
} 
 

 
#three { 
 
    background: green; 
 
    height: 50px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-xs-2" id="one"></div> 
 
    <div class="col-xs-8" id="two"> 
 
    <button type="button" id="mybutton">Hide</button> 
 
    </div> 
 
    <div class="col-xs-2" id="three"></div> 
 
</div>