I am working on making a page that has multiple tabs each tab has different content in it. I looked online for tutorials and found this site http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery. I have been following it, i have tweaked the settings to how I want it to look however when I try to click on a different tab nothing changes. I am still pretty new to jquery so I am a little confused in that field and I was hoping someone could help me out and let me know what to do.
The problem is that the tab are not switching upon clicking
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./common/res.css"/>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active">Stage</li>
<li>Studio</li>
<li>Session</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<form>
Room Selection:<br>
<select name="room">
<option value="">Select Room</option>
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</div>
<div id="tab2" class="tab">
<p>Studio</p>
</div>
<div id="tab3" class="tab">
<p>Session</p>
</div>
</div>
</div>
</body>
</html>
en/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}ter code here
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
Thanks
<!DOCTYPE html><html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active" data-toggle="#tab1">Stage</a></li>
<li data-toggle="#tab2">Studio</li>
<li data-toggle="#tab3">Session</li>
</ul>
</div>`
<div class="tab-content">
<div id="tab1" class="tab active">
<form>
Room Selection:<br>
<select name="room">
<option value="">Select Room</option>
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</select>
</form>
</div>
<div id="tab2" class="tab">
<p>Studio</p>
</div>`
<div id="tab3" class="tab">
<p>Session</p>
</div>
</div>
<style>`
`.tabs {
width:100%;
display:inline-block;
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links li:hover {
background:#a7cce5;
text-decoration:none;
}
li.active, li.active:hover {
background:#fff;
color:#4c4c4c;
}
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}`
.tab {
display:none;
}
.tab.active {
display:block;
}`
</style>
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links li').on('click', function(e) {
tabs(jQuery(this).attr('data-toggle'));
jQuery(this).addClass('active').siblings().removeClass('active');
});`
function tabs(tab) {
jQuery('.tab-content .tab').hide()
jQuery('.tab-content').find(tab).show();
}
});
</script>
</body>
</html>
First of all you should include jquery library, then correct your html, and use fucntions from start please, be true! :D I suggesting you to not use a tags in tabs
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm having a difficult time figuring out why my tabbed id is not working or functioning like it should. On a click, its supposed to replace the text with something different (i.e. page under construction).
Here is what I have so far..
HTML
<!doctype html>
<html>
<head>
<title>Main Page</title> <!--main page title -->
<script type="text/javascript" scr="home_page.js"></script>
<link rel="stylesheet" type="text/css" href="home_page.css"/>
</head>
<body>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li>Home</li>
<li>Inventory</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>
</body>
</html>
CSS
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
JavaScript
$(home_page.html).ready(function() {
$('navbar ul li a').click(function() {
var tab_id =$(this).attr('href');
$('navbar ul li a').removeClass('active');
$('tab').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});
Problems:
You need to include jQuery library in your header, before your own script
$(document).ready - this makes your code run when the page is loaded
When you want to select a class, you need to add a . before it (just like CSS), for example you had $('navbar ul li a') which should be $('.navbar ul li a')
In your tab links, you only had href="#", you need to put the correct id of the tabs (e.g. #tab1), and since you already have # here, you don't need it again in $(tab_id)
I have fixed your code and you can try a working version below:
$(document).ready(function() {
$('.navbar ul li a').click(function() {
var tab_id = $(this).attr('href');
$('.navbar ul li a').removeClass('active');
$('.tab').removeClass('active');
$(this).addClass('active');
$(tab_id).addClass('active');
});
});
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li>Home</li>
<li>Inventory</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>
I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.
It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.
I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.
The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.
I have below code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css"/>
ul.tabs {
float:left;
list-style:none;
height:22px;
width:100%;
border-radius:8px 0 -50px 0;
margin:0;
padding:0;
}
ul.tabs li {
float:left;
height:21px;
line-height:21px;
border:1px solid #999;
overflow:hidden;
position:relative;
background:#ADD8E6;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
margin:0 2px -1px 0;
padding:0;
}
ul.tabs li a {
text-decoration:none;
color:#000;
display:block;
font-size:1em;
border:1px solid #fff;
outline:none;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding:0 20px;
}
ul.tabs li a:hover {
background:#ADD8E6;
}
html ul.tabs li.active,html ul.tabs li.active a:hover {
background:#fff;
border-bottom:1px solid #fff;
}
.tabContainer {
border:1px solid #999;
overflow:hidden;
clear:both;
float:left;
width:100%;
background:#fff;
-webkit-border-radius:8px;
-webkit-border-top-left-radius:0;
-moz-border-radius:8px;
-moz-border-radius-topleft:0;
border-radius:8px;
border-top-left-radius:0;
}
.labelStyle{
font-weight:bold;
font-size:1.5em
}
.tabContent {
font-size: 12px;
padding:20px;
}
.chkAlign{
margin-left:143px
}
</style>
<script>
$(document).ready(function() {
//hiding tab content except first one
$(".tabContent").not(":first").hide();
// adding Active class to first selected tab and show
$("ul.tabs li:first").addClass("active").show();
// Click event on tab
$("ul.tabs li").click(function() {
// Removing class of Active tab
$("ul.tabs li.active").removeClass("active");
// Adding Active class to Clicked tab
$(this).addClass("active");
// hiding all the tab contents
$(".tabContent").hide();
// showing the clicked tab's content using fading effect
$($('a',this).attr("href")).fadeIn('slow');
return false;
});
});
</script>
</head>
<body>
<ul class="tabs">
<li>SEO</li>
<li>Attributes</li>
<li>Classification SIC</li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=sic&gid=138370"></iframe>
</div>
<div id="tab2" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=some&gid=235"></iframe>
</div>
<div id="tab3" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=uk&tab=sic&gid=789"></iframe>
</div>
</div>
</body>
</html>
On click of each tab, i need render some page in an iframe. But above code is not working. Am i doing anything wrong here?
How can i do this?
first thing first it may be that the header send by the iframe is X-Frame-Options so the website refuses to response in the iframe.
your url seems wrong, space avec the double quote of the src and the port of the website should be followed by a /
try to replace your adresses by a local file on your post. Your code should work.
I've got a toggle menu, please see code and function in JsFiddle
When you click on a h3 tag eg Category 1 which is an a tag, the menu opens and stays open on the linking/current page.
However when you click on h3 tag (Category1) again or any submenu for Category 1 eg Option 1, the menu collapses close and then open again on the current page.
Is there any way I can avoid the closing and opening function when you click on any of the links on the current page?
Any code or examples would be appreciated.
Thanks in advance.
http://jsfiddle.net/LcsLr/33/
HTML
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="productmenu">
<div class="submenublock" id="submenu1">
<h3>
<a href="#" class="link" >Category 1</a>
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</div>
<div class="submenublock" id="submenu2">
<h3>Category 2</h3>
</div>
<div class="submenublock" id="submenu3">
<h3>
Category 3
<a href='#' class="arrow" ></a>
</h3>
<ul class="second_level">
<li><a href="#" class="linkx">Option 1
</a></li>
<li><a href="#" class="linkx">Option 2
</a></li>
<li><a href="#" class="linkx">Option 3
</a></li>
</ul>
</div>
</div>
</body>
JS
$(document).ready(function() {
$('h3,.second_level li').each(function(){
var href = $(this).children('a').attr('href');
if(window.location.pathname.search(href) != -1) {
$(this).children('a').addClass('currentPage')
}
});
$('.currentPage').each(function(){
var parent;
if($(this).parent('h3').length > 0){
parent = $(this).parent('h3');
}
else{
parent = $(this).parents('ul').siblings('h3');
}
$(parent).children('.arrow').addClass('open');
$(parent).siblings('ul').show();
});
$('.link').click(function() {
OpenParent($(this).parent('h3'));
window.location = $(this).attr('href');
});
$('.arrow').click(function(e){
e.preventDefault();
OpenParent($(this).parent('h3'));
});
});
function OpenParent(CurrentParent){
var currentArrow = $(CurrentParent).children('.arrow');
$('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');
currentArrow.toggleClass('open');
$(CurrentParent).next().slideToggle('fast');
}
CSS
#sidebar {
float:left;
width:220px;
}
#productmenu { width:220px; margin-left: 0px;}
.submenublock{
margin: 0px;
padding: 0px;
}
.submenublock h3{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0px;
border-bottom:#CCC 1px solid;
}
.submenublock h3 a{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
color: #000000;
}
.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}
.second_level{
list-style-type:none;
list-style:none;
margin:0px;
padding:0px;
}
.second_level li{
list-style-type:none;
list-style:none;
display: block;
border-bottom:#CCC 1px dashed;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
/* background:url(images/menuarrowright.gif) no-repeat right;*/
}
.second_level li a{
display: block;
margin-left:15px;
text-decoration:none;
color:#000000;
}
#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}
.second_level{
display:none;
}
a.currentPage{
color:blue !important;
}
.link{
padding:10px;15px;
display:block;
}
.linkx{
padding:10px;15px;
display:block;
}
.arrow{
background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;
float:right;
height:17px;
width:13px;
margin-top:-27px;
}
.open{
background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}
</style>
I'd like to use the vertical sliding/toggle menu, please see my code below, at the moment the menu toggles only when you click on the + sign, please see the code below.
I'm trying to work out a way when you click on the category name eg Posts and the sub menu would open (same functionality with the +) and the page would go to Posts page. And when you click on the + sign, the function and the page stay the same.
How can I target this task? Your help / suggestion is appreciated.
Thank you!
<html>
<head>
<style type="text/css">
body{background:#CCC;}
#container{margin:0 auto; background:white; border:1px solid #999; width:400px; padding:20px; -moz-border-radius:10px;-webkit-border-radius:10px; overflow:hidden;}
#menu {text-align:left;}
/*Toggle Area*/
#menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
#menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}
/*Menu Setup*/
#menu ul{padding:0; margin:0; width:150px;}
#menu ul ul{border:1px solid #CCC;overflow:hidden;}
#menu ul.navmenu li {margin:0; list-style:none;float:left;}
#menu ul.navmenu li li {float:none;}
/*Links*/
#menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
#menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
/*Heading Outer div*/
#menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
/*Header Links*/
#menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
/*Header Link Hover*/
#menu ul.navmenu .menutop a:hover{color:#333;}
/*Removes white border for the first header*/
#menu ul.navmenu li:first-child .menutop a {border-width:0px;}
/*Single Menu Width Fix*/
#menu ul.navmenu .menusingle a{width:140px;}
/*Border Radius and Special Border Width*/
#menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul class="navmenu">
<li><div class="menutop">Posts<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Tags</li>
</ul>
</li>
<li><div class="menutop">Pages<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Edit</li>
</ul>
</li>
<li><div class="menutop menusingle">Comments</div></li>
<li><div class="menutop">Users<div class="toggle">+</div></div>
<ul class="submenu">
<li>Manage</li>
<li>Add New</li>
<li>Profile</li>
</ul>
</li>
</ul>
</div></div>
</body>
</html>
This is code I have used to do exactly that, except I used arrow images instead of + and - but you should be able to modify it. Hope it helps!
Edit:
I've put the code below onto JSFiddle so you can try it out: http://jsfiddle.net/CrxAg/3/
HTML:
<div id="menu">
<div class="submenublock" id="submenu1"><h3>Category1</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
<div class="submenublock" id="submenu2"><h3>Category2</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
</div>
JS:
$(document).ready(function(){
$('div.submenublock > ul').hide();
$("div.submenublock > h3").css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
$('div.submenublock > h3').click(function() {
$(this).next().slideToggle('fast',function(){
//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {
$(this).prev().css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
} else {
$(this).prev().css("background", "url(images/menuarrowup.gif) no-repeat right bottom");
}
return false;
});
});
/* change appearance of h3 element on hover to make it look like a link */
$('div.submenublock > h3').hover(over, out);
function over(event) {
$(this).find("a").css("color", "#663");
$(this).css("cursor", "pointer");
}
function out(event) {
$(this).find("a").css("color", "");
$(this).css("cursor", "default");
}
/*end hover code*/
});