Kamran Kamran - 4 months ago 16
HTML Question

when i hide the previous panel the next panel is moved leftward to the previous one's place and i want it to be there as it was

when i click the Button1 the Panel1 is hidden and same is the functionality of all buttons. But when i hide the Panel1 the Panel2 is moved to Panel1's place and i want to be at place where it was. kindly help me




<head>
<title>JQuery Event Listener</title>

<script src = "jquery-3.0.0.js"></script>

<style>
header {
background-color: gray;
text-align: center;
}

main {
padding-left: 39%;
position: relative;
}

.panel {
display: inline-block;
}

.panel-Heading {
background-color: blue;
width: 60px;
padding: 5px;
border: 1px groove;
}

.panel-Body {
width: 60px;
padding: 5px;
border: 1px solid;
}
</style>

</head>

<body>
<header>
<br>
<h1>Let's Have Fun!</h1>
<button id = "btn1" data-panel="1">Button1</button>
<button id = "btn2" data-panel="2">Button2</button>
<button id = "btn3" data-panel="3">Button3</button>
<button id = "btn4" data-panel="4">Button4</button>
<br><br>
</header>

<br><br>

<main>
<div id="panel1" class="panel">
<div class = "panel-Heading">Panel1</div>
<div class = "panel-Body">Content</div>
</div>

<div id="panel2" class="panel">
<div class = "panel-Heading">Panel2</div>
<div class = "panel-Body">Content</div>
</div>

<div id="panel3" class="panel">
<div class = "panel-Heading">Panel3</div>
<div class = "panel-Body">Content</div>
</div>

<div id="panel4" class="panel">
<div class = "panel-Heading">Panel4</div>
<div class = "panel-Body">Content</div>
</div>
</main>
<script>
$(function(){

$("#btn1").on('click', function() {
$("#panel1").fadeToggle();
});

$("#btn2").on('click', function() {
$("#panel2").fadeToggle();
});

$("#btn3").on('click', function() {
$("#panel3").fadeToggle();
});

$("#btn4").on('click', function() {
$("#panel4").fadeToggle();
});

});
</script>
</body>



Answer

Add width: 60px; to your .panel class:

.panel {
    display: inline-block;
    width: 60px;
}

... then nest the divs you'd like to hide inside of them:

<div class="panel">
    <div id="panel1">    
        <div class = "panel-Heading">Panel1</div>
        <div class = "panel-Body">Content</div>
    </div>      
</div>
<div class="panel">
    <div id="panel2">
        <div  class = "panel-Heading">Panel2</div>
        <div class = "panel-Body">Content</div>
    </div>      
</div>
<div class="panel">
    <div id="panel3">
        <div  class = "panel-Heading">Panel3</div>
        <div  class = "panel-Body">Content</div>
    </div>      
</div>
<div class="panel">
    <div id="panel4">
        <div  class = "panel-Heading">Panel4</div>
        <div  class = "panel-Body">Content</div>
    </div>     
</div>

This will cause the nested div to disappear when the buttons are clicked, while the outer div remains in place to hold the space.

Also, since your JavaScript is below the elements it will be affecting, you don't need to wait for document ready. You're also writing more click handlers than you need to. You can probably swap all of your JavaScript out for the following:

$(".panel").on('click', function() {
    $(this).first().fadeToggle();        
});