My webpage features a dashboard with tabs on the left and corresponding content on the right. To ensure proper alignment, I have utilized Bootstrap to create two columns - one for the tabs and one for the content. However, I am facing an issue where the border of the tabs does not cover the full height of the content on the right side. In an attempt to fix this, I wrote a jQuery function that sets the height of the last tab ("#ws"), but unfortunately, it only works on page load and not on button click.
In short
1) Visit
2) Take note of the border-right of the tab and how its height matches the content on the right
3) Click on any other tab such as "address book" and observe how the height decreases
The goal is to maintain a consistent height matching the content on the right-hand side.
Here is a snippet of my HTML:
<div class="col-md-2 col-sm-3 hidden-xs nopadding">
<div id="dtnavs">
<div class="col-md-12 tabtxt active" id="dasht">My Dashboard</div>
<div class="col-md-12 tabtxt" id="cartt">My Cart</div>
<div class="col-md-12 tabtxt" id="addresst">Address Book</div>
<div class="col-md-12 tabtxt" id="ordert">My Orders</div>
<div class="col-md-12 tabtxt" id="wisht">My Wishlist</div>
<div class="col-md-12 tabtxt" id="newst">Newsletters</div>
</div>
<div class="col-md-12 tabtxt" id="ws"></div><!--set height dynamically-->
</div>
Upon click:
$("#addresst,#mtab3").click(function() {
$('#dashboardtab,#carttab,#ordertab,#wishtab,#newslettertab,#video').slideUp(500);
$('#addtab').slideDown(500);
$(".dashnav").find(".active").removeClass("active");
$(this).addClass("active");
setwsheight("#addtab");
$(".ccatname,#bcactive").text("Address Book");
console.log(this);
return false;
});
Function setwsheight();
function setwsheight(sh){
$('#ws').delay(1000).height($(sh).height()-$('#dtnavs').height());
var str = "$('#ws').height($("+sh+").height()-$('#dtnavs').height())";
console.log(str);
console.log(sh+" height : "+$(sh).height());
console.log("dtnavs height : "+$('#dtnavs').height());
console.log("WS height :" +$('#ws').height());
};