Sarma Sarma - 3 months ago 10
jQuery Question

Show/hide sidebar menu and extend col size with slide effect

I don't like much way for bootstrap sidebar wrapper so I made my one but I need some help:

$('.hidee').click(function(){

$('.c1').removeClass('col-md-2').addClass('col-md-1');
$('.c2').removeClass('col-md-10').addClass('col-md-11');
$('.hidee').removeClass('hidee').addClass('showw');

});
$('.showw').click(function(){

$('.c1').removeClass('col-md-1').addClass('col-md-2');
$('.c2').removeClass('col-md-11').addClass('col-md-10');
$('.showw').removeClass('showw').addClass('hidee');
});


When i add new class by using console I see that I got new class but it doesnt work when I click on button with that new class...
Also when it resize those 2 columns it just appears like hide/show, how can I add some sliding animation?

UPDATE:

I did this first part for resizing but now I need effect for little sliding if it is possible.

Full code:

$('.sh').click(function(){
var sh = $(this).attr('sh');
if(sh=="hide"){
$('.c1').removeClass('col-md-2').addClass('col-md-1');
$('.c2').removeClass('col-md-10').addClass('col-md-11');
$('.sh').attr('sh','show');
$('.sh').html('Show');
}else if(sh=="show"){

$('.c1').removeClass('col-md-1').addClass('col-md-2');
$('.c2').removeClass('col-md-11').addClass('col-md-10');
$('.sh').attr('sh','hide');
$('.sh').html('Hide');

}else{}
});

<button class="btn btn-default sh" sh="hide" style="float: right; margin-top: 0; margin-right: -1em;">Hide</button>


And I have two columns.

Answer

You'll need to add a CSS transition to the elements you're resizing, div for example:

div {
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

You also need to bind the click event to the document as you're dynamically creating the "showw" class and wont be able to bind on document ready.

$(document).on('click', '.hidee', function() {
  $('.c1').removeClass('col-md-2').addClass('col-md-1');
  $('.c2').removeClass('col-md-10').addClass('col-md-11');
  $('.hidee').removeClass('hidee').addClass('showw');
})

$(document).on('click', '.showw', function() {
  $('.c1').removeClass('col-md-1').addClass('col-md-2');
  $('.c2').removeClass('col-md-11').addClass('col-md-10');
  $('.showw').removeClass('showw').addClass('hidee');
});

See https://codepen.io/anon/pen/zKxBwN for a working example.

Comments