change bootstrap div class with jquery button click

Question

when page loading i want to show 2 col-md-6 div and one button saying "click to show third div". if someone click the button, i want to toggle third div col-md-4 and change previous 2 col-md-6 to col-md-4. Change button to "click to hide 3 rd div"

HTML

<div class="container">
<h1>Hello World!</h1>
<div class="row pull-right" style="margin-bottom:10px;"> <button class="btn btn-primary" id="btncontrol">Click to Add </button> </div>
<div style="clear:both">
    <div class="row">
        <div class="col-sm-6" id="col_fld_6" style="background-color:lavender;">.col-sm-4</div>
        <div class="col-sm-6" id="col_fld_62" style="background-color:lavenderblush;">.col-sm-4</div>
        <div class="col-sm-4" style="background-color:#E6B2A4;display:none" id="last_div">.col-sm-4</div>
    </div>
</div>

<div class="container"> <h1>Hello World!</h1> <div class="row pull-right" style="margin-bottom:10px;"> <button class="btn btn-primary" id="btncontrol">Click to Add </button> </div> <div style="clear:both"> <div class="row"> <div class="col-sm-6" id="col_fld_6" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-6" id="col_fld_62" style="background-color:lavenderblush;">.col-sm-4</div> <div class="col-sm-4" style="background-color:#E6B2A4;display:none" id="last_div">.col-sm-4</div> </div> </div> — jax
– jax, Commented Mar 28, 2016 at 6:02

madalinivascu · Accepted Answer · 2016-03-28 06:15:03Z

4

Use add and removeClass

$('#btncontrol').click(function(){
  $('div[id^="col_fld"]').removeClass('col-sm-6').addClass('col-sm-4');
  $('#last_div').show();
});

https://jsfiddle.net/1boyw5oe/

or :

$('#btncontrol').click(function(){
  $('div[id^="col_fld"]').toggleClass('col-sm-6').toggleClass('col-sm-4');
  $('#last_div').toggle();
});

https://jsfiddle.net/1boyw5oe/1/

edited Mar 28, 2016 at 6:15

answered Mar 28, 2016 at 6:08

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashwani Goyal · Accepted Answer · 2016-03-28 06:08:26Z

0

Well following is the HTML and JS you need.

FIDDLE

HTML

<div class="row all-three-div">
    <div class="col-md-6">Div 1</div>
    <div class="col-md-6">Div 2</div>
    <div class="col-md-4" style="display:none;">Div 3</div>
</div>

<button id="showThirdDiv">Click to show third Div</button>

jQuery

jQuery(document).ready(function(){
    jQuery('#showThirdDiv').click(function(){
        jQuery('.all-three-div div').removeClass('col-md-6').addClass('col-md-4').show();
    });
});

You need to add a class all-three-div in three divs' parent div.

answered Mar 28, 2016 at 6:08

Ashwani Goyal

6264 silver badges18 bronze badges

Collectives™ on Stack Overflow

change bootstrap div class with jquery button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related