moving visible divs' onto the hidden divs' position

Question

I have a dropdown in a div. when I select different options from dropdown menu, I need to show different divs' based on the value selected. I am hiding the other divs when I am showing a div. but I am getting empty space in hidden divs' position. how can I move the visible div to immediatley below the dropdown always ?

Thanks in advance...

Use `display: none`, not `visibility: hidden`, then you shouldn't get empty space. — Barmar, Jul 05 '13 at 11:19
read up on CSS: `z-index`, `float`, `display`, `overflow`... all useful rules — Elias Van Ootegem, Jul 05 '13 at 11:23

score 0 · Answer 1 · answered Jul 05 '13 at 11:45

DEMO

JQUERY :

$(document).ready(function(){
$('#drop').change(function () {
        if ($('#drop option:selected').text() == "Volvo"){
            $('div').hide();
            $('#volvo').show();
        } else if ($('#drop option:selected').text() == "Mercedes"){
            $('div').hide();
            $('#mercedes').show();
        } else if ($('#drop option:selected').text() == "Audi"){
            $('div').hide();
            $('#audi').show();
        } else {
            $('div').hide();
        } });
});

HTML:

<select id="drop">
  <option value="">--select--</option>
    <option value="volvo">Volvo</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<div id="volvo">u have selected volvo</div>
<div id="mercedes">u have selected mercedes</div>
<div id="audi">u have selected audi</div>

CSS:

div{display:none;
width:40%;
background-color:#EBFFC2;
border-radius:5px;}

moving visible divs' onto the hidden divs' position

1 Answers1