I am trying to implement JQuery Tabs on my page. But, the problem is, when I click on the tabs,the UI of the tabs do not change.The selected tab always remains selected and the unselected tab is always unselected. I am not able to figure out which tab is actually clicked.Since, I have used "bind" to bind the click event on the tabs,the implementation is working as expected.Since I am totally new to JQuery UI stuff, I am not able to figure out where I am going wrong.
Here is the jsp code for the tabs(written as mentioned on the net).
<div id="tabs" style="margin-top: 100px; width: 100%;margin-left:20%;">
<ul>
<li id="allocated">Allocated</li>
<li id="pending">Pending</li>
</ul>
</div>
In javascript file :
$('#tabs',container).tabs();
I have written different bind event for both the tabs as follows :
$("#allocated", container).unbind("click").click(function() {
});
$("#pending", container).unbind("click").click(function() {
});
Do I need to change the state of the tabs manually or it should change by itself.
There is no content to display for your tabs, that's why this is not working properly :
<div id="tabs" style="margin-top: 100px; width: 100%;margin-left:20%;">
<ul>
<li id="allocated">Allocated
</li>
<li id="pending">Pending
</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
</div>
And no need to specify container in your selector :
$('#tabs').tabs();
» Live Demo
Why you are unbinding the click event? This will stop the click event added by $('#tabs').tabs();.
If you want to do custom actions on the click, you just need to define the click:
$("#allocated", container).click(function() {
alert(1);
});
$("#pending", container).click(function() {
alert(2)
});
Related
Currently working on a dummy website using Javascript as I am new to the language.
I'm operating with JQuery and using the "tabs" function it provides; however I'd like to know how to have only the navigation bar visible as if the tab was collapsed on loading up the page.
Simply put my navigation bar is comprised of a single button as so;
<button class="button">Content</button>
With the content as:
<p id="before">Some text before the content.</p>
<div id="content">
<p>Just some dummy text.</p>
</div>
And just in case it is of any importance, here are the script links;
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
The script used for tab functions;
$( function() {
$( "#tabs" ).tabs({
collapsible: true
});
} );
I have tried using the visibility function provided but that doesn't suit my needs as it still leaves a gap for where the element stood. I have also tried using display:none; but the js overrides it. Also the jquery hide function doesn't seem to want to work either.
What I want is for when the website loads to have the <p> within the div: content to be hidden until the button is clicked on. And when the button is clicked on I would like the content within the div to show and for the <p id="dummy"> text to disappear. And vice versa if the content were to be shown and the button is pressed again.
Try
$( function() {
$( "#tabs" ).tabs();
} );
function handleTabFirstClick () {
$('.myHidden').removeClass('myHidden');
}
#tabs div.myHidden {
display:none !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1" class="myHidden tabcontent">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2" class="myHidden tabcontent">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3" class="myHidden tabcontent">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
I have an ul with li's forming a menu with drop-downs. Every time an li is clicked, it gets the "ui-state-active", when it's clicked again, the class is removed. I want to hide the content of the page when an li has that class. It should be easy but I'm running into problems, I have:
$("li").on("click", function(){
if( $(this).hasClass("ui-state-active") ){
console.log("Yes");
mainContent.fadeOut();
} else if ( !$(this).hasClass("ui-state-active")){
console.log("No");
mainContent.FadeIn();
}
})
It always evaluates to Yes. What am I doing wrong?
I think the crux of your question is really in your last comment
Honestly, I just can't find where is the code to add and remove that class, it's a Wordpress and that part must be a plugin.
It's almost certainly the case that the li click handler code you showed in your question is firing before the plugin is toggling the class.
The only fix for this issue is to find the plugin, check for the events it raises, and hook in to those event(s) for showing/hiding your content. There is no shortcut.
$(this) is just the clicked element. You have to query for the other elements, because the clicked now has this class as you have explained.
But this depends on the HTML markup on how to get there. Maybe you can work with jQuery.parent():
https://api.jquery.com/parent/
Something like this should work:
$(this).parent('ul').hasClass("ui-state-active")
$(function() {
$("#tabs").tabs();
$("li").on("click", function() {
$(this).parent('ul').children().each(function(index) {
if ($(this).hasClass("ui-state-active")) {
console.log("Yes");
// mainContent.fadeOut();
} else if (!$(this).hasClass("ui-state-active")) {
console.log("No");
// mainContent.FadeIn();
}
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat.
Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna
ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum.
Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
Add below line in both of your conditions:
$(this).toggleClass("ui-state-active");
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need to create a menu where hovering on a link reveals a div, but then you can click on the link to go to another page. I don't see a way to do this with jQuery tabs, but maybe I'm missing something. Sorry I don't have any code sample... I'm trying to figure out which direction to go. I've also looked at easytabs (http://os.alfajango.com/easytabs/), but that does not seem to provide for this either.
Thanks!
It can be done in a standard jQuery UI Tabs plugin. A little note to a code below: jQuery UI Tabs require that anchors to tabs need to have a tab ID as their href attribute. So the loop at the beginning iterates through every a element in a tabs navigation to move an url to a data attribute. This way the links will work without JavaScript too.
Demo: http://codepen.io/anon/pen/YPZxGj (google.com and stackoverflow.com can't be run in iframes, so only the last page - jquery.com will show up)
JavaScript:
$("#tabs ul li a").each(function(index){
$(this).data("url", $(this).attr("href"));
$(this).attr("href", "#tabs-" + (index+1));
});
$( "#tabs" ).tabs({});
$("#tabs ul li a").mouseenter(function(){
$("#tabs").tabs("option", "active", $(this).parent().index());
});
$("#tabs ul li a").click(function(e){
e.preventDefault();
window.location = $(this).data("url");
});
HTML:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
I have been trying to achieve a sticky navbar in my project, but somehow its not working. I can't get what's wrong here (PS: it doesn't even show up in my fiddle but does show in local files I'm building. )
Have been using twitter bootstrap 3.x. What might possibly be going wrong? A little help would be much appreciated.
Here's the code I'm implementing:
HTML:
<div class="container-fluid">
<h3>this is a title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie posuere justo id condimentum. Morbi eu massa non enim varius lobortis vitae id massa. Aliquam congue consectetur nisi, sit amet tempus nunc mattis at. Aliquam non eleifend quam, ac accumsan urna. Nullam porta metus lacus, aliquam pretium purus rhoncus et. Donec in congue mi. Integer eu massa tincidunt, convallis diam in, ultrices lacus. Nulla bibendum metus sed enim faucibus, vel egestas tortor sollicitudin. Proin bibendum condimentum enim, ac luctus augue gravida et. Proin pretium tortor sed turpis gravida molestie. In hac habitasse platea dictumst.</p>
</div>
<div id="navi" class="navbar navbar-inverse visible-md visible-lg" role="navigation">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="active">About me
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
<p>lol Proin auctor turpis ac elit pharetra laoreet. Cras consequat mauris ut condimentum vulputate. Nunc faucibus viverra suscipit. Sed sit amet ante interdum libero malesuada adipiscing sed at erat. Praesent et tristique lorem. Vestibulum lobortis laoreet tortor eget pellentesque. Nam commodo nibh libero, in elementum mi lobortis ut. this is a title Pellentesque interdum, quam sit amet sagittis porttitor, nunc lorem aliquam lorem, varius laoreet lectus diam vel mi. Fusce ut justo a neque vestibulum aliquam ac at ante. Phasellus porttitor mollis semper. Cras ultricies augue augue, non consequat nisi laoreet et. Donec sapien erat, molestie in faucibus ut, dapibus id risus. Morbi nec lorem nulla. Suspendisse potenti. Ut congue purus vel tincidunt facilisis. Cras condimentum lorem a purus lacinia dignissim. Curabitur convallis, leo ut vestibulum feugiat, ante urna ullamcorper ipsum, et aliquam justo sem ac urna. Praesent rhoncus risus nec dignissim ornare. Sed nec tellus nibh. Nulla in mauris ac lorem mollis ultricies id et mauris.</p>
The CSS:
.fixed {
position: fixed;
top: 0;
height: 50px;
z-index: 180;
}
The jQuery
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 50;
if ($(window).scrollTop() > navHeight) {
$('#navi').addClass('fixed');
}
else {
$('#navi').removeClass('fixed');
}
});
});
The Fiddle Link
Thanks in advance
Add the following code to your css
#navi{
display: block!important;
}
It is because somehow bootstrap is making your nav display:none
Working Code
.visible-md and .visible-lg are hiding your nav bar, because with .visible-md and .visible-lg, your element will only be visible in desktop and large devices (desktops) and in jsfiddle, the viewport is small.
You can do the following to show your nav, but it won't be required if your site opens in parent frame. See your old fiddle in full screen result here: http://jsfiddle.net/x84PJ/5/embedded/result/ Your nav is visible here.
#navi { display: block !important;} /* use this only for jsfiddle result output, else your nav will break on medium and small devices*/
and also fix your jQuery code
$('nav').removeClass('fixed');
should be
$('#navi').removeClass('fixed');
For more detail on navbar try this: http://getbootstrap.com/examples/navbar/
How to add a function which will close active div in toggle when you click on another a element from menu.
Here is code:
http://jsfiddle.net/t4JAT/
Jquery code
$(document).ready(function(){
$(".slidingDiv1").hide();
$(".show_hide1").show();
$('.show_hide1').click(function(){
$(".slidingDiv1").slideToggle();
});
});
$(document).ready(function(){
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function(){
$(".slidingDiv2").slideToggle();
});
});
$(document).ready(function(){
$(".slidingDiv3").hide();
$(".show_hide3").show();
$('.show_hide3').click(function(){
$(".slidingDiv3").slideToggle();
});
});
Working demo http://jsfiddle.net/t4JAT/4/
Please avoid so many document ready calls you just need one in your page.
rest below should help.
code
$(document).ready(function(){
$(".slidingDiv1,.slidingDiv2, .slidingDiv3").hide();
$(".show_hide1,.show_hide2, .show_hide3").show();
$('.show_hide1').click(function(){
$(".slidingDiv2,.slidingDiv3").hide();
$(".slidingDiv1").slideToggle();
});
$('.show_hide2').click(function(){
$(".slidingDiv1,.slidingDiv3").hide();
$(".slidingDiv2").slideToggle();
});
$('.show_hide3').click(function(){
$(".slidingDiv1,.slidingDiv2").hide();
$(".slidingDiv3").slideToggle();
});
});
You can use tabs in jquery like this:
For this import css and js file of jqueryui then use this:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Based on what you have provided You can add
$('div[class^=slidingDiv]').hide();
What the above line does is select all divs which have a class name that starts with slidingDiv and hide them which are Content divs in this case.
In every click event handlers to close all div first which will necessarily hide any content div currently open.
One thing, you can stuff all you code in one document ready like
$(function(){
//all your code goes here
})
To check if it's working check for Lorem1 in div1, Lorem2 in div2 and Lorem3 in div23. Changed that to verify.
Working Fiddle