div changing its place how to prevent that

Question

my question is when 'vartalo' div is clicked away with 'a' button then 'pää' div changes its position and comes to 'vartalo' divs place, how to prevent that, mean i want when i toggle'vartalo' div it will not affect other divs position. sorry my english

$(function() {

  $('.nappulat').on('click', function(p) {

    p.preventDefault();

    var panelid = $(this).attr('data-panelid');

    $('#' + panelid).toggle(1).html('hello')

  });

});

#memberlist_links a {
  left: 800px;
  font-size: 70px;
  position: relative;
  left: 800px;
  padding: 0px;
  color: red;
  margin: 0px;
}
.paneelinpaa {
  border: 1px solid black;
  background-color: lightblue;
  height: 200px;
  width: 200px;
  font-size: 70px;
}
.paneelinvartalo {
  border: 1px solid black;
  background-color: lightblue;
  font-size: 70px;
  height: 200px;
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">

  <div class="backgroound">

    <div id="panel1" class="paneelinvartalo">vartalo

    </div>

    <div id="panel2" class="paneelinpaa">pää

    </div>

  </div>

  <div id="memberlist_links">

    <br>

    <a href="#" rel="" class="nappulat" data-panelid="panel1">A

        </a>

    <br>
    <a href="#" rel="" class="nappulat" data-panelid="panel2">B

              </a>

  </div>

</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:29

You cannot use toggle since it effects display css. You need to change visibility.

$(function() {

  $('.nappulat').on('click', function(p) {

    p.preventDefault();

    var panelid = $(this).attr('data-panelid');

    $('#' + panelid).toggleClass('hidden visible'); //toggle visibility
    $('#' + panelid).html('hello');

  });

});

.hidden{
  visibility:hidden;  //hide the visibility
}
.visible{
  visibility:visible;  //show the visibility
}
#memberlist_links a {
  left: 800px;
  font-size: 70px;
  position: relative;
  left: 800px;
  padding: 0px;
  color: red;
  margin: 0px;
}
.paneelinpaa {
  border: 1px solid black;
  background-color: lightblue;
  height: 200px;
  width: 200px;
  font-size: 70px;
}
.paneelinvartalo {
  border: 1px solid black;
  background-color: lightblue;
  font-size: 70px;
  height: 200px;
  width: 200px;
}

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">

  <div class="backgroound">
    <!--Also add visible class to toggle that-->
    <div id="panel1" class="paneelinvartalo visible">vartalo

    </div>
    <!--Also add visible class to toggle that-->
    <div id="panel2" class="paneelinpaa visible">pää

    </div>

  </div>

  <div id="memberlist_links">

    <br>

    <a href="#" rel="" class="nappulat" data-panelid="panel1">A

        </a>

    <br>
    <a href="#" rel="" class="nappulat" data-panelid="panel2">B

              </a>

  </div>

</div>

Or you can just use this. (first answer) toggle visibility of div

score 0 · Answer 2 · answered Sep 09 '15 at 07:57

You can set the visibility to hidden or visible instead. That way the element hold its size and content but you don't see it anymore.

$(function() {
    $('.nappulat').on('click', function(p) {
        p.preventDefault();
        var panelid = $(this).attr('data-panelid');
        var cssVisilibty = $('#' + panelid).css('visibility') == 'hidden' ? 'visible' : 'hidden';
        $('#' + panelid).css('visibility', cssVisilibty).html('hello');
    });
});

See it in action

NOTE: The content of the clicked div will be changed because of the .html('hello')

Also you can do a little optimisation by replacing $('#' + panelid) by $panel and replace the line

var panelid = $(this).attr('data-panelid');

by

var $panel = $('#' + $(this).attr('data-panelid'))

div changing its place how to prevent that

2 Answers2