Tab for specific js script to change the main content height - javascript

I am trying to do a script for a specific tab when it is active, my code is just like this. Each Tabs has different sizes, and I want to have that .content will change its height on every tabs.
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="1" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
<div id="2" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
<div id="3" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
<div id="4" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... </div>
</div>
this is the css of .leftup
.leftupt {
display: block;
font-family: 'FuturaLTRegular';
height: auto;
left: 31px;
margin: 0 !important;
padding: 0;
position: absolute;
text-align: center;
top: 429px;
width: 360px !important;
}
for now this is what it look like..
<div id="1" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... <script></script> </div>
<div id="2" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... <script></script> </div>
<div id="3" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> ... <script></script> </div>
<div id="4" class=".singles"><div class="leftupt">...</div><div class="wrapright"> ...</div> <script></script> </div>
my script is like this but it won't work...
<script type='text/javascript'>
var biggestHeight = jQuery(".content").height();
jQuery(".leftupt").each(function(){
if (jQuery(this).height() > biggestHeight ) {
biggestHeight = jQuery(this).height();
}
});
if (jQuery('.leftupt').height == 0){
biggestHeight=jQuery('.content').height();
}
jQuery(".content").height(biggestHeight);
</script>
Is it possible that it can give the .content height that is dynamic and not static, if what is the height of the .left, it will also the lenght of the .content?


Try to change this
if (jQuery('.leftupt').height == 0)
to
if (jQuery('.leftupt').height() == 0)

Related

how to make html elements respond to their parent viewport rather than browser viewport?

I'm working on a Vue poject and I let the user choose the width and height of app main container by clicking on each device specific icon (mobile, tablet, laptop and desktop). something like firefox responsive tool. how can I force elements inside the main container respond to it's own viewport rather than browser viewport?
I'm using UIKit width component to define my breakpoints. I know I can achieve this by adding/removing classes dynamically, but my Vue components are added dynamicallly by the user, so it's more complex.
I thought there might be a more generic way to do this. here's the sample code ( number of visible slides changes in defferent viewports and if my component is a grid element items inside it should wrap ( based on container width ) ):
<div id="main-container" :style="{width: deviceWidth, height: deviceHeight}">
<!-- Dynamically added component -->
<div class="uk-position-relative uk-visible-toggle uk-light" uk-slider>
<!-- UIKit Width classes -->
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="../../img/01.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>1</h1></div>
</li>
<li>
<img src="../../img/02.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>2</h1></div>
</li>
<li>
<img src="../../img/03.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>3</h1></div>
</li>
<li>
<img src="../../img/04.jpg" alt="">
<div class="uk-position-center uk-panel"><h1>4</h1></div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
</div>

Explanation
This is a very simple, and minimal answer, it's literally been written to simply illustrate how you can tackle your problem, but as you can see within this answer, pressing the different buttons makes the containing element grow/shrink.
As you can see within this solution, all of the elements that are responsive will respond based on the parent element's size. It's really easy to achieve this if you use fixed sizes, like in my example.
Although, take note, I only selected to use a very minimal implementation, no use of Vue or anything sophisticated, this is a simple solution, using native technologies only.
Edit
After having learned exactly what you're looking for, the long story short is that there's no clean & easy way to do that, at least to my knowledge, your best bet would be to simply change & alter the classes, that, by far makes the most sense.
Because your question is somewhat vague, to me it appears that you're trying to execute logic similar to what #arieljuod has stated, where you're trying to run media queries on specific DOM elements rather than the user's viewport.
I'm sorry to inform you that to my knowledge there's no clean and easy way to achieve this, not to say that there isn't a way, I'm sure someone has found a way, but a clean, concise, easy to read, solution, I highly doubt there's such a solution.
const clickHandler = txt => {
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
break;
case 'Tablet':
clName = 'tablet';
break;
case 'Mobile':
clName = 'mobile';
break;
default:
clName = 'desktop';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
Possible Solution
What I would do in this scenario is as stated above, alter classes on the slider, like so, I mean you could use extra/additional logic to check the user's width & whatnot, but this is possibly the most simplistic approach possible.
const clickHandler = txt => {
const slider = document.getElementById("mySlider");
let clName = '';
switch (txt) {
case 'Desktop':
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
break;
case 'Tablet':
clName = 'tablet';
slider.className = 'uk-slider-items uk-child-width-1-3';
break;
case 'Mobile':
clName = 'mobile';
slider.className = 'uk-slider-items uk-child-width-1-2';
break;
default:
clName = 'desktop';
slider.className = 'uk-slider-items uk-child-width-1-4';
}
document.getElementById("app").className = clName;
};
document.querySelectorAll("#sizes button").forEach(btn => {
btn.onclick = () => clickHandler(btn.textContent);
});
#sizes {
width: 100%;
display: block;
overflow: auto;
}
#sizes button {
float: left;
margin: 15px;
padding: 15px;
border: 1px solid black;
background: white;
box-sizing: border-box;
width: calc(33.33% - 30px);
}
#app {
height: 100vh;
background: #eee;
}
#app.desktop {
width: 960px;
}
#app.tablet {
width: 700px;
}
#app.mobile {
width: 320px;
}
.col-2 {
display: block;
overflow: auto;
}
.col-2>* {
float: left;
width: calc(50% - 30px);
padding: 15px;
margin: 15px;
box-sizing: border-box;
border: 1px solid black;
}
/* Just for a demo */
#redBlock {
background: red;
height: 100px;
width: 75%;
}
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<div id="sizes">
<button>Desktop</button>
<button>Tablet</button>
<button>Mobile</button>
</div>
<div id="app" class="desktop">
<div class="col-2">
<p>Hello</p>
<p>World!</p>
</div>
<div id="redBlock"></div>
<div uk-slider>
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul id="mySlider" class="uk-slider-items uk-child-width-1-4">
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>1</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>2</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>3</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>4</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>5</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider1.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>6</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider2.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>7</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider3.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>8</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider4.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>9</h1>
</div>
</li>
<li>
<img src="https://getuikit.com/docs/images/slider5.jpg" alt="">
<div class="uk-position-center uk-panel">
<h1>10</h1>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>

different sections in a single page

I use this source for using different sections in a single page. The demo works fine but when I use these codes it won't work at all. here is the code :
html:
<nav>
<a class="nav" id="1" href="#">Section 1</a>
<a class="nav" id="2" href="#">Section 2</a>
<a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
Section 1
</div>
<div class="section" id="2">
Section 2
</div>
<div class="section" id="3">
Section 3
</div>
css:
a {
margin: 0 10px 0 10px;
text-decoration: none;
color: black;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
nav {
position: fixed;
width: 100%;
background-color: lightgrey;
text-align: center;
margin-bottom: 20px;
}
.section {
height: 100%;
padding-top: 20px;
}
js:
<script type="text/javascript">
$('.nav').click(function() {
var id = $(this).attr('id');
$('html, body').animate({
scrollTop: ($('#' + id + '.section').offset().top)
}, 1000);
});
</script>
This is exactly what i'm using but it won't work. I believe something is wrong with js codes. How can I fix that?
Thanks in advance

First make sure you've included jQuery. Then you need to write your script inside
$(document).ready(function(){
// your code goes here
});
or in short
$(function(){
//your code goes here
});
Both functions are called when the DOM is ready. Thus ensuring that event and handlers are bound properly to elements.
Check this out

Your code is working fine. You might not have included jquery library. Use this structure
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<nav>
<a class="nav" id="1" href="#">Section 1</a>
<a class="nav" id="2" href="#">Section 2</a>
<a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
Section 1
</div>
<div class="section" id="2">
Section 2
</div>
<div class="section" id="3">
Section 3
</div>
<script src="jquery-2.1.3.min.js"></script>
<script src="script.js"></script>
</body>
</html>

window.print(); while printing it leave blank space at top

Here is my code :
<body>
<div class="headerCont noprint">
<div class="headerHold">
<div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"></div>
<ul id="navCont">
<li>blogs</li>
<li>products</li>
<li class="active">Expert</li>
<li>events</li>
<li>Business</li>
</ul>
<div class="rightHeadCont">
<div class="smIcon fbIcon"></div>
<div class="smIcon twtIcon"></div>
<form id="search">
<input type="submit" value="Submit" class="searchBtn">
<input type="text" name="search" placeholder="search" class="searchInput">
</form>
</div>
</div>
</div>
<div class="breadCrumbs noprint">
<ul>
<li>Home</li>
<li><a>></a></li>
<li><a>Expert</a></li>
</ul>
</div>
<div class="cl"></div>
<div class="container">
<ul class="banner noprint">
<li><img src="images/headerImg.jpg" /></li>
<li><img src="images/headerImg.jpg" /></li>
<li><img src="images/headerImg.jpg" /></li>
<li><img src="images/headerImg.jpg" /></li>
</ul>
<div class="bannerShdw noprint"><img src="images/bannerShdw.jpg" width="100%" height="13"></div>
<div class="titleCont">
<h1>Expert</h1>
<ul id="docIcons">
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<li class="d"></li>
</ul>
</div>
<?php
$expertsql = "SELECT * FROM experts WHERE is_active = '1' ";
$expertex = mysqli_query($db,$expertsql);
$ispresent = #mysqli_num_rows($expertex);
if($ispresent > 0)
{
while($experts = mysqli_fetch_assoc($expertex))
{
?>
<div class="expertCont">
<div class="imgCont">
<div class="imgHold">
<img src="<?php echo base_url;?>thumbnail.php?file=admin/uploads/experts/<?php echo $experts['image'];?>&width=170&height=169&maxw=170&maxh=169">
</div>
</div>
<h2><?php echo ucwords($experts['name']);?></h2>
<?php echo trim($experts['short_description']);?>
<div class="readMore">
Read more >
</div>
</div>
<?php
}
}
else
{
echo 'No Expert Found';
}
?>
</div>
CSS :-
#media print
{
.noprint {display:none;}
}
The section which I don't want to show while printing is :- noprint and I have declared display:none to this class. It also get hidden but it leaves blank page at the top. See the screen shot below :
How to remove the blank space at the top? I also saw html #MEDIA print {}, to hide markup leaves blank space in the print but it it not worked for me. Thanks in advance
EDIT :-
CSS :-
.headerCont {
width: 100%;
height: 85px;
background: url(../images/headerBg.jpg) repeat-x bottom center;
.breadCrumbs {
width: 1001px;
margin: 0 auto;
height: 38px;
}
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
}
.bannerShdw {
width: 100%;
height: 13px;
margin-bottom: 30px;
}

if your headerCont class has css which enables the class to have any other display value and/or height you might still see that space even when printing. I suggest you use !important:
#media print
{
.noprint {
display:none !important;
height:0px !important;
}
}

how to scroll the page?

when I run the below code, the page doesn't scroll, and doesn't show all of my page container. first I used Ajax but my menu didn't work. then I had to use Iframe tag. but it has a problem too. I try to discover the problem but I didn't succeed. can anybody help me to solve this?
<div id="maincontainer" style="position: fixed; width: 80%; height:500px; right: 10%; ">
<table style="background-color: rgb(100, 100, 100); border-radius: 5px;" dir="rtl">
<tr>
<td style="width: 90px; height: 30px;">صفحه اصلی</td>
<td style="width: 60px; height: 30px;">پروفایل</td>
</tr>
</table>
<div id="three" style="font-family: 'B Homa'; font-size: large;">
<ol>
<li data-slide-name="slide-one">
<h2>
<span>مدیریت مدیران</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/1.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-two">
<h2>
<span>مدیریت فرم ها</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/2.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-three">
<h2>
<span>مدیریت فرهنگی</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/3.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-four">
<h2>
<span>مدیریت آپلود سنتر</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/4.jpg" alt="image" />
</div>
</li>
<li data-slide-name="slide-five">
<h2>
<span>مدیریت اخبار</span></h2>
<div>
<img src="Lite%20Accordion/img-demo/5.jpg" alt="image" />
</div>
</li>
</ol>
<noscript>
<p>
Please enable JavaScript to get the full experience.
</p>
</noscript>
</div>
<div>
<ul class="menu">
<li><span class="l"></span><span class="r"></span><span class="t">مديريت کاربران</span>
<ul>
<li>کاربران فعال</li>
<li>کاربران بلاک</li>
<li>تمام کاربران</li>
<li>کاربران تایید نشده</li>
</ul>
</li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">مديريت آپلودسنتر</span></a>
<ul>
<li>نمایه جدید</li>
<li>لیست نمایه ها</li>
<li>دسته بندی جدید</li>
<li>لیست دسته ها</li>
<li>آیتم جدید</li>
<li>لیست آیتم ها</li>
</ul>
</li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentcolumn"><%--<div id="newContent" style="float:left; width: 100%; height: 615px; direction: rtl; ">
</div>--%>
<iframe id="frame" runat="server" style="width: 1095px; height: 1600px;"></iframe>
</div>
</div>
<div id="stickybar" class="expstickybar">
</div>
<div style="text-align: center; padding-top: 3px">
<b>Copyright (c)</b>
</div>
<!-- LeftPanel Plugin -->
<div class="float">
<div class="moduletable">
<p>
برنامه امروز
</p>
</div>
</div>
<script language="javascript" type="text/javascript">
//$(document).ready(function () {
// $('#accordion').accordion();
//});
function ChangeSrc(trg) {
var frm = document.getElementById("frame");
if (frm) {
frm.src = trg;
}
}
</script>
<script type="text/javascript">
(function ($, d) {
$('#three').liteAccordion({ autoPlay: true, theme: 'dark', rounded: true, enumerateSlides: true, firstSlide: 1, easing: 'easeInOutQuart' });
})(jQuery, document);
</script>
</div>

Please, just remove the css property position: fixed; from maincontainer div.
As you can see at this sample that I made from you sample html code, I just remove that property.
You could also play around with the css property overflow:auto; that controls when to show the scroll, or show/hide the content beyond the limited area of a div.

Loading a tab on button click

I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)

I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});

Categories