switch div's with the same name css jquery -


i have 2 div's same name below (i can not rename divs unfortunately).

how can switch 2 'nav' div's, 1st 1 appears above other?

example:

<div class="main">    <div class="nav"> ... </div>    <div class="nav"> ... </div> </div> 

just incase wonder, put via cms - have nav's, both same class name. want 1st 1 (div) appear before 2nd one.

css or jquery...

you can select them css using:

/* first .nav */ .main .nav:first-child { ... } .main .nav:nth-child(1) { ... }  /* second .nav */ .main .nav:nth-child(2) { ... } .main .nav:last-child { .. } /* select last .nav */ 

edit bases on comment.

hide second .nav using display: none, make jquery function (please note i'm no jquery hero):

$(".swapit").click(function() {     if( $(".main .nav:nth-child(1)").is(":visible") ) {         $(".main .nav:nth-child(1)").hide();         $(".main .nav:nth-child(2)").show();     }     else {         $(".main .nav:nth-child(2)").hide();         $(".main .nav:nth-child(1)").show();             } }); 

live demo


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -