Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This may not be the best solution, but try it and let me know if this is what you intend to do, knowing that I replaced your images with 24x24 icons and assumed the final behaviour you are expecting.</p> <p>separate css file containing:</p> <pre><code>div.item{ height: auto; border: 1px solid red; } img.icon{ display: inline; position: relative; top: 0px; } div.content{ display: inline-block; position: relative; top: 0px; } div.inactive div.content{ display: none; } div.inactive{ width: 16px; height: 16px; } </code></pre> <p>HTML part:</p> <pre><code>&lt;div id="nav" style="width: 980px; position: absolute; left: 100px; overflow: hidden" &gt; &lt;div class="item inactive"&gt; &lt;img class="icon" src="images/image1.png" width="16" height="16" /&gt; &lt;div class="content"&gt; &lt;h2 style="color:#009DD8"&gt;Title1&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item inactive"&gt; &lt;img class="icon" src="images/image2.png" width="16" height="16" /&gt; &lt;div class="content"&gt; &lt;h2 style="color:#902272"&gt;Title2&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="item inactive"&gt; &lt;img class="icon" src="images/image3.png" width="16" height="16" /&gt; &lt;div class="content"&gt; &lt;h2 style="color:#68AA41"&gt;Title3&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item inactive"&gt; &lt;img class="icon" src="images/image4.png" width="16" height="16" /&gt; &lt;div class="content"&gt; &lt;h2 style="color:#F5B21D"&gt;Title4&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>javascript part:</p> <pre><code>$(document).ready(function() { $('#nav div.item').click(function(){ var myItems = $('.item'); var pendingAnimation = false; for(var i = 0; i &lt; myItems.length; i++) { if($(myItems[i]).is(':animated')){ pendingAnimation = true; break; } } if(!pendingAnimation){ //extend the item $(this).animate({"width": 700, "height": 150}, 1500 ); //make it an active item $(this).addClass('active'); //grow the icon $(this).find('img').animate({"width": 24, "height": 24}, 1500 ); //make the content of the item fade in $(this).find('div.content').fadeIn(100); //Fading out the content of all the other active elements $('.item').not($(this)).find('div.content').fadeOut(500); //Shrinking all the other active icons $('.item').not($(this)).find('img').animate({"width": 16,"height": 16}, 1500 ); //Shrinking all the other active items $('.item').not($(this)).animate({"width": 16,"height": 16}, 1500 ); //making all the other items as "inactive" $('.item.active').removeClass('active').addClass('inactive'); } }); }); </code></pre> <p>Effect: whenever you click onto an icon, it expands the clicked div.item, makes it active and animates any other "active" element with a reverse animation.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload