Jquery toggle changes div order only when parameter is used in toggle()

Question

I have these divs

<div id="fechaPartida">
            <label>Partida </label>
            <input type="text" class=".ui-icon-calendar dates" name="date" id="dateSV"  value="" /> 
        </div>
        <span id="hideit">
        <div id="fechaRegreso"> 
            <label>Regreso</label>
            <input type="text" class=".ui-icon-calendar dates" name="date" id="dateFV" value="" />
        </div>
        </span>
        <div id="soloIda">
            </br>
            <input type="checkbox" class="" name="" id="soloIdaCheck" value=""/> Solo ida
        </div>

I'm hiding and showing (toggling) the div with the span "hideit" around it. it toggles just fine with

$('#soloIdaCheck').click(function(){
        $('#hideit').toggle();

});

but I want that cool effect jquery gives you using toggle('slow') but when I do that, the div order changes because the div I hid is now the last one

check this image to understand it better

enter image description here

this is the css for the divs

#fechas{
    width:100%;
    height:50px;
}

#fechaPartida{
    float:left;
    width:170px;
}
#hideit{
    display:inline-block;
}
#fechaRegreso{
    float:left;
    width:150px;
}
#soloIda{
    padding-top:5px;
    float:left;
    width:80px;
}

Are the ``s and/or ``s floated? Could be a browser layout difference with floated elements having CSS `display` manipulated. Also you have block level markup (`
`) inside inline level container (``) which might lead to unwanted layout issues. — andyb, Mar 11 '13 at 14:16
I just changed the span for a div and the order is not changing now which is good but now the effect is vertical which moves the elements below and it looks just wrong. Can I make the toggle to be horizontal hiding to the left and showing to the right? or do I have to use something like "animate" — Jesus Rodriguez, Mar 11 '13 at 14:23
Can you try adding CSS `display:inline-block` for the `#hideit` element to render the element inline? — andyb, Mar 11 '13 at 14:29
I just added it and I get the checkbox in the middle of the 2 input text. I added the css of the other element to the question.. I dont know why this is happenning — Jesus Rodriguez, Mar 11 '13 at 14:44
I think it is happening because `.toggle('slow')` actually animates the opacity, width and height, which causes elements (and their surroundings) to move around when their width and/or height reaches 0. — andyb, Mar 11 '13 at 15:04
Could you add the relevant CSS to the question and/or create a demo of the problem on [jsFiddle](http://jsfiddle.net) please? — andyb, Mar 11 '13 at 15:05
thanks to you the positioning of the those divs is no longer a problem.. my new problem is caused by the toggle effect moving the checkbox downwards when I want it to move horizontally only. But I guess that is no longer part of this question and I'd had to start another one. I'll try to solve it using animate though. — Jesus Rodriguez, Mar 11 '13 at 15:18
OK, glad you got it working. http://stackoverflow.com/questions/521291/jquery-slide-left-and-show might help you on the next part :-) — andyb, Mar 11 '13 at 15:22

score 0 · Answer 1 · answered Mar 11 '13 at 14:02

0

You can use, event.preventDefault():

Description: If this method is called, the default action of the event will not be triggered.

$('#soloIdaCheck').click(function(){
        event.preventDefault();
        $('#hideit').toggle();    
});

answered Mar 11 '13 at 14:02

AURIGADL

1,832
2
13
15

score 0 · Answer 2 · answered Mar 11 '13 at 14:06

0

this seems to work ok for me using $('#hideit').toggle("slow");

http://jsfiddle.net/dazziep/EYbDd/

answered Mar 11 '13 at 14:06

dazziep

245
1
4
16

dazziep · Answer 3 · 2013-03-11T16:53:25.193

just changed a few small things... seems to works ok on mine, don't know if this helps any???

HTML

<div id="fechaPartida">
    <label>Partida</label>
    <input type="text" class=".ui-icon-calendar dates" name="date" id="dateSV" value="" />
</div>
<div id="fechaRegreso" class="hideit">
    <label>Regreso</label>
    <input type="text" class=".ui-icon-calendar dates" name="date" id="dateFV" value="" />
</div>
<div id="soloIda">
    <input type="checkbox" class="" name="" id="soloIdaCheck" value="" />Solo ida
</div>

javascript

$('#soloIdaCheck').click(function () {
    $('.hideit').toggle("slow");
});

css

#fechas {
    width:100%;
    height:50px;
}
#fechaPartida {
    float:left;
    width:170px;
}
#hideit {
    display:inline-block;
}
#fechaRegreso {
    float:left;
    width:150px;
}
#soloIda {
    padding-top:20px;
    margin-left:10px;
    float:left;
    width:80px;
}

Edit:- sorry just read other comments, your not having problems with order anymore.. My bad .. DOH!!

score 0 · Accepted Answer · answered Aug 28 '13 at 12:09

Here is the nicest visual solution: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

It is more beautiful slide horizontally than the slow effect. I know it's a matter of taste, but taste that is shared by the vast majority of end users.

Jquery toggle changes div order only when parameter is used in toggle()

4 Answers4