CODEWITHSUNDEEP
jquerycss
Mick
Mick

Reputation: 2898

Toggle DIV and close the gap

This is a simplified version of something I want to achieve

I have a page that displays 3 div boxes 

<div class="divd" id='div1' style="left:50px">>111</div>
<div class="divd" id='div2' style="left:150px">222</div>  
<div class="divd" id='div3' style="left:250px">333</div>
<p></p>
<p></p>
<p><input type="button"  id="tg" value="toggle"></p>

I am using Jquery to toggle the middle div 

  $('#tg').click(function() { 
    $('#div2').toggle('slow', function() {
    });
  });

This all works as expected, But what I want to do is 'close the gap' left by hiding the div , so the end result is div1 and div3 next to each other Can this be done, any pointers or help much appreciated , thanks 

.divd { 
position:absolute ; 
width: 50px;
height: 50px;   
top: 50px ;
left: 120px ; 
border: 1px solid black;
background-color:#999; 
border-radius:5px;  
z-index:200;
text-align:center;
}

Upvotes: 2

Views: 154

Answers (2)

isherwood
isherwood

Reputation: 61105

I assume that your elements are absolutely positioned, like so: http://jsfiddle.net/agpHB/1/

You need to not do that. Try this:

http://jsfiddle.net/agpHB/2/

.divd {
    float: left;
    width: 150px;
    background-color: #eee;
}

<div class="divd" id="div1">111</div>
<div class="divd" id="div2">222</div>
<div class="divd" id="div3">333</div>

The float isn't even strictly necessary. If you must position absolutely, you'll need to slide element 3 to the position of element 2 at the same time that you do the toggle. It won't be nearly as simple.

UPDATE: To respond to your comment about additional elements, try something like this: http://jsfiddle.net/agpHB/3/

Upvotes: 1

Meeth
Meeth

Reputation: 91

<script>
flag=0;
displayhide(x){
a=document.getElementById(x).style;
if(flag=0)
    {
    a.display="block";
    flag=1;
    }
else
    {
    a.display="none";
    flag=0; 
    }
}
</script>

and use
<p><input type="button"  id="tg" onclick="displayhide('div2')" value="toggle"></p>

Upvotes: 0

Related Questions