Prevent children divs from moving while div toggle

Question

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
}

Ganesh Jadhav · Accepted Answer · 2014-08-19T09:24:59.563

1

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();
});

edited Aug 19 '14 at 09:24

answered Aug 19 '14 at 09:16

Ganesh Jadhav

2,830
1
20
32

While this is a valid solution, their might be problems when there are clickable items inside. The user would still be able to clik them. – Shaeldon Aug 19 '14 at 09:21
No need for hacky javascript, use CSS `visiblity` instead combined with jquery's toggleClass() (see the other answer). – Benny Bottema Aug 19 '14 at 09:38

score 1 · Answer 2 · edited Aug 19 '14 at 10:32

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');
    }
  });
});

score 0 · Answer 3 · edited May 23 '17 at 11:44

0

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');
        });
    });

edited May 23 '17 at 11:44

Community

1
1

answered Aug 19 '14 at 09:36

Benny Bottema

11,111
10
71
96

I took into consideration also toggleClass solution, but for me it doesn't work. .hidden { opacity:0; var panelId = $('#' + $(this).data('panel')); panelId.toggleClass('hidden'); } – kuba0506 Aug 19 '14 at 09:42
@kuba0506 The jsFiddle example clearly demonstrates it works perfectly – Benny Bottema Aug 19 '14 at 09:45

Prevent children divs from moving while div toggle

3 Answers3