I was searching for a pure CSS answer to hiding and showing content but after no luck I have been playing around with a piece of JavaScript code. My question is below the code, as it may help you to see the code first.
<script type="text/javascript">
$(document).ready(function(){
$('.text_container').addClass("visible");
$('.text_container').click(function() {
var $this = $(this);
if ($this.hasClass("visible")) {
$(this).removeClass("visible").addClass("hidden");
} else {
$(this).removeClass("hidden").addClass("visible");
}
});
});
</script>
<div id="services" class="text_container">
<h4>SERVICES</h4>
<div>
<p>Loads of text blah blah blah</p>
</div>
</div>
/* HIDE and SHOW content JavaScript function */
.hidden div {display:none;}
.visible div {display:block;}
.text_container {
background-color: #39b54a;
background-image: url("pattern2.png");
border: 1px solid #777777;
box-shadow: 0 1px 1px inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
color: #000000;
padding: 5px;
text-align: left;
width: auto;
}
.text_container h4 {
cursor: pointer;
}
.text_container div p {
margin-bottom: 10px;
}
.visible > div {
display: block;
font-size: 17px;
height: 100%;
}
#rating > div {
clear: left;
height: 260px;
}
/* end of HIDE and SHOW content javascript function */
Currently as expected the div with class = text_container area is clickable, so if a place a form in the child DIV when you select the form the content hides. I Would like to make only the H4 element
clickable so clicking on the shown content will not hide the content.
I am useless at JavaScript and I imagine this requires rejigging the js.
You can use:
$('.text_container h4').click(function() {
if($(this).hasClass("visible")) {
$(this).removeClass("visible").addClass("hidden");
} else {
$(this).removeClass("hidden").addClass("visible");
}
});
The content in the $(' ... ') is just like a CSS selector, so if you know CSS then it won't be a problem for you.
With CSS you could style that h4 element with:
.text_container h4 { color: #000000; }
and just the same, you can create a wrapped set with jQuery that selects it with:
$('.text_container h4')
This will accomplish your goal, example:
$(document).ready(function() {
$('.text_container h4').addClass("visible");
$('.text_container h4').click(function() {
var $this = $(this).parent();
if ($this.hasClass("visible")) {
$this.removeClass("visible").addClass("hidden");
} else {
$this.removeClass("hidden").addClass("visible");
}
});
});
We are selecting the H4 and adding the click event to it, but then using .parent() to access to parent DIV.
replace $('.text_container')... with $('.text_container h4')... or, better yet, $('h4').... if it's the only H4 element on the page.
change this:
$('.text_container').click(function() {
to this:
$('.text_container h4').click(function() {
Simply replace with
$('.text_container h4').click( ...
I am not sure how someone will be able to click on an element with display: none. Also, replace this:
if ($this.hasClass("visible")) {
$(this).removeClass("visible").addClass("hidden");
} else {
$(this).removeClass("hidden").addClass("visible");
}
With this:
$(this).toggle();
Full code:
$(function() {
$('.text_container h4').click(function() {
$(this).parent().toggle(); // toggles between visible and hidden
});
});
Related
I have a site with back/next buttons fixed on the right and left side of the page. They are a single colour icon. Problem is they overlay both black and white images as the page scrolls. Can an 'anchor' or something similar be set so when the page reaches it (similar to how 'sticky' objects work I guess) I can change color of the div?
html (Wordpress)
...
<div><?php bnNav_content_nav( 'nav-below' ); ?></div> //puts the back/next buttons on the page
css
[class*="navigation"] .nav-previous a,
[class*="navigation"] .nav-next a {
position: fixed;
z-index: 999;
color: #fff;
}
I understand my code is complicated to understand but essentially the output is
post images ...
'anchor' to change the .nav color
post content...
<nav>
<nav id="nav-next"> ... </div>
<nav id="nav-previous"> ... </div>
</nav>
EDIT: The nav overlays images then the content is on a white background. I want the nav to be white when its over the images then when it hits the content turn black. So basically set up a spot where it will change
You can use JavaScript to iterate through all elements but the nav and check which elements intersect and then put attributes on the elements the nav will intersect with the color you want the nav text to be and then update the color on every scroll event.
var nav = document.querySelector("nav");
var navRect = nav.getBoundingClientRect();
function checkNavColor() {
var allButNav = document.querySelectorAll(":not(nav)");
for (var i = 0; i < allButNav.length; i++) {
var rect1 = allButNav[i].getBoundingClientRect();
var rect2 = navRect;
// By Buu Nguyen (http://stackoverflow.com/a/12067046/4245061)
if (!(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom)) {
nav.style.color = allButNav[i].getAttribute("data-navcolor");
}
}
}
window.addEventListener("scroll", checkNavColor);
checkNavColor();
body {
height: 200vh;
}
nav {
position: fixed;
}
div {
height: 200px;
}
div:first-child {
background: black;
}
div:nth-child(2) {
background: white;
}
div:last-child {
background: black;
}
<nav>Text which changes color</nav>
<main>
<div data-navcolor="white"></div>
<div data-navcolor="black"></div>
<div data-navcolor="white"></div>
</main>
It is a really bad solution if you have more than a couple of elements like in the snippet and also uses HTML for non-semantic content.
If you want the text to be visible no matter the background you can add a shadow with the opposite color of the text:
body {
height: 200vh;
}
nav {
position: fixed;
/* Add the smallest possible shadow in all directions */
text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
div {
height: 200px;
}
div:first-child {
background: black;
}
div:nth-child(2) {
background: white;
}
div:last-child {
background: black;
}
<nav>Text which has a shadow of the opposite color</nav>
<main>
<div></div>
<div></div>
<div></div>
</main>
I am trying to create a drop-down menu for a site that i am working on, and I am having problems with hiding and showing the drop down with the code that I have been using.
Basically, I need this:
The Collections
to read in the browser like:
The Collections
or display
The Collections
Code:
<html>
<head>
<title>Menu Test</title>
<!-- Begin css library -->
<style type="text/css">
html {
overflow-y: scroll;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #fff;
color: #444;
margin: 0px;
padding: 0px;
}
/* Begin top bar
*************************/
#top-bar {
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
font-family: GillSansMTStd-Book;
}
#top-bar-content {
position: relative;
height: 94px;
margin: 0 auto;
width: 1025px;
text-align: "right";
}
#top-bar .wrap {
padding-left: 33px;
padding-right: 33px;
}
#top-bar .links {
float: right;
line-height: 94px;
}
#top-bar a {
outline:0;
}
#top-bar .links a {
display: inline-block;
color: #b9afa3;
font-size: 14px;
font-weight: normal;
letter-spacing: .8px;
text-decoration: none;
margin-left: 30px;
text-transform: uppercase;
}
#top-bar .links a:hover,
#top-bar .links a.active {
color: #746758;
background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;
}
#top-bar .collections {
display: none;
background-color: #695d4f;
color: #fff;
position: absolute;
top: 94px;
width: 340px;
text-align: center;
margin-left: 80px;
padding-top: 10px;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
z-index: 5;
}
#top-bar .collections a{
color:#fff;
display:block;
line-height:26px;
padding:10px 20px;
margin:0;
background-image:none;
text-transform:capitalize;
font-size:16px;
}
#top-bar .collections a.the-ardmore-collection {
font-size:14px;
}
#top-bar .collections a:hover,
#top-bar .collections a.active {
background-color:#fff;
color:#695d4f;
background-image:none;
}
</style>
<!-- End css library -->
<!-- Begin jquery library -->
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'block';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<!-- End jquery library -->
</head>
<body>
<div id="top-bar">
<div id="top-bar-content">
<div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div>
<div>
</body>
</html>
I personally think it is better to use the :hover CSS property for menus. It is a lot easier to implement but you might have problems on mobile devices. https://developer.mozilla.org/fr/docs/Web/CSS/:hover
However, if you really want it on the onclick event, you will need to add or bind your event. Here is the jQuery documentation for it: http://api.jquery.com/bind/
once you will have bind the event, you will have to use your function's "event" parameter to get which element you clicked on and then show the right menu.
The problem:
You have no handle on the element you are trying to change inside your function. This is because you are using getElementById(), but the collections div has no id attribute defined.
You are referencing the element whose display you wish to toggle inconsistently. Sometimes you are using document.getElementById(shID+"-show"), and other times you are simply using document.getElementById(shID).
There is a logic error in your if statement; the condition in if (document.getElementById(shID+'-show').style.display != 'none') should check whether the style IS set to none, if so we want to change the style to block, and vice versa.
The Solution
Add an id attribute to the collections div like so:
<div id = "collections" class = "collections">
Inside your showID function replace all instances of document.getElementById(shID+"-show") with document.getElementById(shID). In fact, an even cleaner way to do this would be to only call the function once and assign the result to a variable.
Change the condition in your second if statement to check if the display IS equal to none.
With all the changes mentioned, your final function will look something like this:
function showHide(shID) {
var el = document.getElementById(shID);
if (el) {
if (el.style.display === 'none' || el.style.display =='') {
el.style.display = 'block';
}
else {
el.style.display = 'none';
}
}
}
You may notice I added an or in the if statement. This is because for some reason the initial value of el.style.display (before it is set using javascript in the function) is ''. Without this or condition it would take two clicks to display the menu the first time around.
The Multiple menu solution:
Multiple menus expands the showHide from one to two lines of code.
Note: The basics are documented in another Answer to this post that was posted prior to this one.
This time vs. the previous single method we save the divs to an array of variables. It is important this array is defined globally outside of any function.
This code is test and works well.
The initialization code:
Create the arrays
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
The initialization in now in an init function. Not required but is more reliable. This way it will never execute before page load.
window.onload = init;
The init just get the showHide divs for the first time.
Then hides them all.
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
I have added a hide all function. It is easier and quicker to hide all menus when another is displayed. You do not want two menus open at the same time. You could track the open menu and specifically close that one, but why bother?
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
Wrapping it up:
I altered some of your HTML for test and demo purposes.
HTML
Art Into Design
The Collections
Contact Us
Newsletter
<div id="d2"class="collections" >
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
</div>
<div id="d3"class="collections">
Hand bags
Scatter Cushions
Batonka Stools
</div>
<div id="d4"class="collections">
Tablecloths
Place Mats
Napkins
Table Runners
</div>
</div>
</div>
</div><div>
JavaScript
<script language="javascript" type="text/javascript">
function showHide(id) {
hideAll();
div[id].style.display=toggle[div[id].style.display];
}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
window.onload = init;
</script></body></html>
Very simple one line of code to execute to show hide. Just a few lines to set up.
This code is tested and works well. This is for just one menu but can easily to expand to multiple. See my other Answer for multiple menus (added after this one)
Setup code is run one time when the page loads.
The setup:
Create an array to do the toggle. This eliminates the if else.
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
Read the "collections div into a variable. Read once, never again.
var div = document.getElementById('d1');
The initialize the div so the DOM holds the display:none. Otherwise the first read will be null.
div.style.display='none';
Then the showHide function
function showHide(id) {div.style.display=toggle[div.style.display];}
The div.style.display within the toggle array toggle[div.style.display] wil either be block or none. Which ever, toggle will return the opposite. The sames as if it were toggle['block'] which returns 'none' which get assigned to the collections div.
Note:
The JS code should be located just before the closing body tag </body>. This way it will not be parsed until the HTML is all loaded.
Also it is very important to use a valid DOC Type. If not the Browser has to guess and may guess wrong. Slows own page load time.
<!DOCTYPE html>
<html lang="en">
The JavaScript code:
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Also way too much white space. This could significantly increase your transmission time. Most should be compressed as your pages should be gzipped.
<!DOCTYPE html>
<html lang="en"><head><title>Menu Test</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
html {overflow-y: scroll;margin: 0; : 0;font-family: sans-serif;}
body {background-color: #fff;color: #444;margin: 0px; : 0px;}
/* Begin top bar *************************/
#top-bar {-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);font-family: GillSansMTStd-Book;}
#top-bar-content {position: relative;height: 94px;margin: 0 auto;width: 1025px;text-align: "right";}
#top-bar .wrap { -left: 33px; -right: 33px;}
#top-bar .links {float: right;line-height: 94px;}
#top-bar a {outline:0; }
#top-bar .links a {display: inline-block;color: #b9afa3;font-size: 14px;font-weight: normal;letter-spacing: .8px;text-decoration: none;margin-left: 30px;text-transform: uppercase;}
#top-bar .links a:hover,#top-bar .links a.active {color: #746758;background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;}
#top-bar .collections {display: none;background-color: #695d4f;color: #fff;position: absolute;top: 94px;width: 340px;text-align: center;margin-left: 80px; -top: 10px;-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);z-index: 5;}
#top-bar .collections a{ color:#fff; display:block; line-height:26px; :10px 20px; margin:0; background-image:none; text-transform:capitalize; font-size:16px;}
#top-bar .collections a.the-ardmore-collection { font-size:14px;}
#top-bar .collections a:hover,#top-bar .collections a.active { background-color:#fff; color:#695d4f; background-image:none;}
</style></head><body>
<div id="top-bar">
<div id="top-bar-content"><div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div id="d1"class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Note: The CDATA is to isolate the JS from HTML. Without the CDATA the JS will sometimes cause HTML errors when running the W3C HTML Markup Validator. It is a recommended best practice.
The CDATA tells the Browser it is not HTML. The format is
<![CDATA[ data goes here ]]>
The reason it has the two slashes is comment out the CDATA tags from the JS parser but still recognized by the HTML parser.
I'm tying to make text fadeIn and stay visible while the mouse pointer is in the container and only when the mouse pointer leaves the designated area, only then must the text fadeOut but for some reason its not working, the text will fadeOut even when the mouse is inside the container.
I'm using Jquery lib 1.10.1 as well as Jquery ui 1.11.0
Here is the code:
HTML
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="hold">
<div class="conti">
<div class="arrow-right"></div>
</div>
<div class="text-fade"></div>
</div>
CSS
.hold{
width: 142px;
background: yellow;
overflow: hidden;
padding:10px;
}
.conti{
width: 30px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid green;
}
.text-fade{
display: none;
float: right;
margin-top:-30px;
margin-left: 10px;
margin-right:10px;
}
JS
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000).css('display',"block");
});
$('.hold').mouseout(function () {
$('.text-fade').fadeOut(1000);
});
This is the link to my fiddle example
mouseout is triggered by children, use mouseleave instead
$('.hold').mouseenter(function () {
// var d = $('.arrow-right');
// d.effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').text("this is a test text").fadeIn(1000);
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
JS fiddle updated
Put the text directly into ".text-fade" and give some transition to the ".text-fader" class. Then change the text color via JS.
Here's the code for changing from #FFFFFF to #000000 and back again:
$('.hold').mouseenter(function () {
$('.arrow-right').effect("bounce", { direction:'right', times:3 }, 700);
$('.text-fade').css('color', '#000000');
});
$('.hold').mouseout(function () {
$('.text-fade').css('color', '#FFFFFF');
});
You are using the wrong functions, its mouseenter() and mouseleave()
working fiddle here
your javascript
$('.hold').mouseenter(function () {
$('.text-fade').text("this is a test text");
$('.text-fade').fadeIn(1000);
$('.text-fade').show();
});
$('.hold').mouseleave(function () {
$('.text-fade').fadeOut(1000);
});
also that bounce function you had seems to cause some problems that I could not find out why so I removed it
I’m after a hand with a bit of JavaScript if possible, I’m working on a collapsible list using jQuery and want to change a background image in a css file dependent on the state of the list
This is the html for the div
<div class="collapse_div">
<div class="header_div">header text</div>
<div class="content_div">
Some text
</div>
<div class="header_div">another header</div>
<div class="content_div">
some more text
</div>
</div>
This is the .css that puts the image (expanded.gif) into the header div
.collapse_div{
margin: 0;
padding: 0;
width: 500px;
}
.header_div {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(expanded.gif) no-repeat 95%;
background-color:#ccc;
}
.content_div {
padding: 5px 10px;
background-color:#fafafa;
}
And this is the javascript function that controls the expand/collapse when header_div is clicked
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500);
});
});
I’ve played around with adding code to the .click(function) to try and change the background css tag in .header_div to another file (collapse.gif) but I can’t get it to work, so I thought I’d ask the experts as my javascript is really rusty
At the moment the collapse/expand of the div works fine having the background image change on click would really make it look good
You can have a class with the requried background set and apply that class conditionally. Try this
CSS
.header_div_collapsed {
background: url(collapse.gif) no-repeat 95% !important;
}
JS
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500, function(){
var $this = $(this);
if($this.is(':visible')){
$this.removeClass('header_div_collapsed');
}
else{
$this.addClass('header_div_collapsed');
}
});
});
});
Your script should be something like this,
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
var elm = jQuery( this );
jQuery(this).next(".content_div").slideToggle(500, function(){
if(jQuery(this).is(":visible"))
jQuery(elm).css({"background-image" : "collapse.gif"});
else
jQuery(elm).css({"background-image" : "expand.gif"});
});
});
});
thanks to both the suggestions post below I managed to get this to work
firstly I added a whole new css function as just defining the background didn't work
.expand_div_collapsed {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(collapsed.gif) no-repeat 95%;
background-color:#ccc;
}
then the JS was changed to this
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
var co = jQuery(this);
jQuery(this).next(".content_div").slideToggle(500, function(){
if(jQuery(this).is(':visible')){
jQuery(co).addClass('expand_div_collapsed');
}
else{
jQuery(co).removeClass('expand_div_collapsed');
}
});
});
});
the add and remove class calls had to be swapped around and I had to define the var co before the slideToggle call
but thanks to everyone who offered suggestions as I would have never got this to work otherwise
I want tabs along the left side of the page instead of across the top. I'm already loading jQuery for other reasons (effects), so I prefer using jQuery to another UI framework. Searches on "vertical tabs jquery" yield links to works-in-progress.
Is getting Vertical Tabs to work across browsers fraught, or is it so trivial that, once you have a solution, it doesn't seem worthwhile to post example code?
Have a look at the jQuery UI vertical Tabs Docu.
I try out it, it worked fine.
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
<script>
$(document).ready(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
</script>
Try here:
http://www.sunsean.com/idTabs/
A look at the Freedom tab might have what you need.
Let me know if you find something you like. I worked on the exact same problem a few months ago and decided to implement myself. I like what I did, but it might have been nice to use a standard library.
I've created a vertical menu and tabs changing in the middle of the page. I changed two words on the code source and I set apart two different divs
menu:
<div class="arrowgreen">
<ul class="tabNavigation">
<li> Tab 1</li>
<li> Tab 2</li>
</ul>
</div>
content:
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="secund">
CONTENT 2
</div>
</div>
the code works with the div apart
$(function () {
var tabContainers = $('div.pages > div');
$('div.arrowgreen ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.arrowgreen ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
//o_O\\ (Poker Face) i know its late
just add beloww css style
<style type="text/css">
/* Vertical Tabs ----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
UPDATED ! http://jqueryui.com/tabs/#vertical
I wouldn't expect vertical tabs to need different Javascript from horizontal tabs. The only thing that would be different is the CSS for presenting the tabs and content on the page. JS for tabs generally does no more than show/hide/maybe load content.
Another options is Matteo Bicocchi's jQuery mb.extruder tabs plug-in:
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/
Have a look at Listamatic. Tabs are semantically just a list of items styled in a particular way. You don't even necessarily need javascript to make vertical tabs work as the various examples at Listamatic show.
super simple function that will allow you to create your own tab / accordion structure here: http://jsfiddle.net/nabeezy/v36DF/
bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) {
//Dependent on jQuery
//PARAMETERS
//tabClass: 'the class name of the DOM elements that will be clicked',
//tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)',
//contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked',
//contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)',
//MUST call bindSets() after dom has rendered
var tabs = $('.' + tabClass);
var tabContent = $('.' + contentClass);
if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')};
tabs.each(function (index) {
this.matchedElement = tabContent[index];
$(this).click(function () {
tabs.each(function () {
this.classList.remove(tabClassActive);
});
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
this.classList.add(tabClassActive);
this.matchedElement.classList.remove(contentClassHidden);
});
})
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
//tabs[0].click();
}
bindSets('tabs','active','content','hidden');