StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<pre><code>$(document).ready(function(){ $(".tabnav li a").click(function(){ var thisNav = $(this); var thisNavIndex = thisNav.parent().index()+1; var getTabHeight = $('#tab'+ thisNavIndex).height(); $(".main-vervolg.right .left .domain").animate({ height: getTabHeight+'px'}, 650).css('overflow-y','scroll'); // delete this test// $('#test').html( ' The tab height is: '+ getTabHeight +' || The button nav index +1 is: '+ thisNavIndex ); }); // PRODUCTEN TABS $('.tabs > ul').tabs({ fx: { opacity: 'toggle' } }); }); </code></pre> <p>How I did it:</p> <ul> <li>On click we get the parent <code>li</code> <code>.index()+1</code> ('cause it's zero based) of the clicked element <code>a</code>.</li> <li>Than we just look for the div <code>#tab(+ that index number)</code></li> <li>we calculate his height and we put it into a var <code>getTabHeight</code></li> <li>Than we just <code>animate</code> the column to the calcutated <code>height</code>!</li> </ul> <p>That's it! Happy coding and make me know the results or if you encounter some problems.</p> <h2>EDIT to your comment:</h2> <pre><code> $('.tabnav li a').click(function(){ var thisNav = $(this); var thisNavIndex = thisNav.parent().index()+1; var getTabHeight = $('div#tab'+ thisNavIndex).height(); var heightRemake = ( $('.top').height()+48 ) + getTabHeight; if($('#tab'+ thisNavIndex).is(':visible')) { return false; } $(".main-vervolg.right .left .domain").animate({ height: heightRemake+'px'}, 650).css('overflow-y','scroll'); }); </code></pre>

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