Inside my div class="box" there is heading H1 and logo div . HTML is shown below so logo image is below heading text. Now I want to shuffle position of H1 and logo div using jquery (using ternary or if else) to position heading below logo div and vice versa.

HTML:

<div id="block">    
     <div id="box">    
       <h1><a>HEADING TEXT</a></h1>    
       <div class="logo">
          <a>
             <img src="images/logo.png">" alt="" width="150" height="150"/>
          </a>
       </div>    
     </div>
 </div>

CSS:

#box {
    width: 230px;
    height: 500px;
}

#logo {
    width: 230px;
    height: auto;
}

#logo img {
    width: 150px height:150px;
}

How I can shuffle position

Inside my div class="box" there is heading H1 and logo div . HTML is shown below so logo image is below heading text. Now I want to shuffle position of H1 and logo div using jquery (using ternary or if else) to position heading below logo div and vice versa.

HTML:

<div id="block">    
     <div id="box">    
       <h1><a>HEADING TEXT</a></h1>    
       <div class="logo">
          <a>
             <img src="images/logo.png">" alt="" width="150" height="150"/>
          </a>
       </div>    
     </div>
 </div>

CSS:

#box {
    width: 230px;
    height: 500px;
}

#logo {
    width: 230px;
    height: auto;
}

#logo img {
    width: 150px height:150px;
}

How I can shuffle position

• javascript
• jquery
• html
• css

• Try this <a><img src="~images/logo.png" alt="" width="150" height="150"/></a> – Amit Commented Aug 19, 2013 at 9:03
• 2 when to trigger the shuffle – Arun P Johny Commented Aug 19, 2013 at 9:04
• using condition set in jquery variable. – galexy Commented Aug 19, 2013 at 9:06
• It is simple as if condition is TRUE then keep <h1> at top of logo image as it is, otherwise keep it below logo image – galexy Commented Aug 19, 2013 at 9:09

3 Answers 3

See a demo

var $box = $('#box').click(function(){
    var $this = $(this), $h1 = $box.find('h1'), $div = $box.find('.logo');

    if($h1.index() < $div.index()){
        $h1.detach().insertAfter($div)
    } else {
        $h1.detach().insertBefore($div)
    }
})

Demo: Fiddle

You can use jquery's .detach() and .insertAfter() methods for this.

$("#box h1:first").detach().insertAfter(".logo");

Since in box we have just the text and logo, we can switch than just using prepend function:

var logo = $('#box .logo'),
    h1 = $('#box h1'),
    box = $('#box'),
    isLogo = false,
    selector = function(){
         isLogo = !isLogo;
         return isLogo? logo : h1;
    };



setInterval(function(){

    var toSwitch = selector();
    toSwitch.fadeOut('slow', function(){
        toSwitch.prependTo(box).fadeIn('slow');
    })

    //or just 
    //selector().prependTo(box);
}, 3000)

JSFIDDLE