CODEWITHSUNDEEP
javascripthtmlcss
kuba0506
kuba0506

Reputation: 475

Prevent children divs from moving while div toggle

I'm new and have I think very simple problem to solve.

I have 4 buttons to show/hide each panel. What should I do to prevent child divs from moving to te left while hiding some div? I prefer them to stay at the initial position.

This is my code:

HTML:

    <button class="panel-button" data-panel="panel1">1</button>
    <button class="panel-button" data-panel="panel2">2</button>
    <button class="panel-button" data-panel="panel3">3</button>
    <button class="panel-button" data-panel="panel4">4</button>
    <div class="wrapper">
        <div id="panel1">1</div>
        <div id="panel2">2</div>
        <div id="panel3">3</div>
        <div id="panel4">4</div>
    </div>

JS:

        $(function() {
            $('.panel-button').on('click',function(){
                var panelId = $(this).data('panel');// attr('data-panel')
                $('#'+panelId).toggle();
            });
        });

CSS:

.wrapper {
    overflow: hidden;
    width: 420px;
}

.wrapper > div {
    width: 100px;
    height: 100px;
    background: green;
    float: left;
    margin-left: 5px;
    margin-top: 10px
}

Upvotes: 2

Views: 1825

Answers (3)

Nagendra Srinivas M
Nagendra Srinivas M

Reputation: 21

But still you can use another approach

You can use the visibility property in CSS to achieve this as shown in the below Fiddle link : link

JS Snippet:

$(function() {

  $('.panel-button').on('click',function(){
    var panelId = $(this).data('panel');// attr('data-panel')
    console.log($('#'+panelId).css('visibility'));
    if($('#'+panelId).css('visibility') === 'hidden') {    
      $('#'+panelId).css('visibility','visible');
    }
    else {
      $('#'+panelId).css('visibility','hidden');
    }
  });
});

Upvotes: 1

Benny Bottema
Benny Bottema

Reputation: 11513

The CSS visibility is designed to keep the space a DOM object occupies, but not actually rendering it. Opacity changes its appearance, but not its behavior (eg. still clickable).

So instead of .toggle(), combine visibility with jQuery's .toggleClass():

jsFiddle solution

$(function() {
        $('.panel-button').on('click',function(){
            var panelId = $(this).data('panel');// attr('data-panel')
            $('#'+panelId).toggleClass('hideMe');
        });
    });

Upvotes: 0

Ganesh Jadhav
Ganesh Jadhav

Reputation: 2848

Apply css rule opacity = 0; to the div, instead of hiding it.
Like this:

$('.panel-button').on('click',function(){
    var pnl = $('#' + $(this).data('panel'));
    pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});

Solution for clickability issue:

$('.panel-button').on('click',function(){
    var pnl = $('#' + $(this).data('panel'));
    if(pnl.is(':visible'))
        $('<div></div>').appendTo(pnl).width(pnl.width());
    else
        pnl.next().remove();
    pnl.toggle();
});

Upvotes: 1

Related Questions