Sorry about the title name I didn’t know how to explain this lol..
Basically, I have a page that opens the content on the same page using jQuery.. Basically when the page loads, the brief section opens, but then when you click on another link.. This content should then close and the new content should load.. I’ve even tried: “.show(0).siblings().hide(0);” but that just hides everything and just shows this particular div.
Here is the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS-reset.css">
<link rel="stylesheet" type="text/css" href="testing.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<header id="header-main" role="Header, banner, logo">
<hgroup class="logo" role="logo">
<img src="Logo.png" width="150" height="150">
</hgroup>
</header>
<nav class="navigation" role="navigation">
<a href="#" id="briefLink">Brief</a><br />
<a href="#" id="researchLink">Research</a><br />
<a href="#" id="ideasLink">Ideas</a><br />
<a href="#" id="designLink">App Design</a><br />
<a href="#" id="implementationLink">Implementation</a>
</nav>
<section class="content brief" role="Things about the brief">
BRIEF
</section>
<section class="content research" role="Things for research">
RESEARCH
</section>
<section class="content ideas" role="The ideas part goes here">
IDEAS
</section>
<section class="content design" role="The design part goes here">
DESIGNS
</section>
<section class="content implementation" role="The implementation goes here">
IMPLEMENTATION
</section>
<script>
$(document).ready(function()
{
//$('.brief').hide();
$('.research').hide();
$('.ideas').hide();
$('.design').hide();
$('.implementation').hide();
$('#researchLink').click(function()
{
var divname= this.name;
$('.research').show(0).siblings().hide(0);
});
$('#ideasLink').click(function()
{
$('.ideas').show();
});
$('#designLink').click(function()
{
$('.design').show();
});
$('#implementationLink').click(function()
{
$(toggle);
$('.implementation').show();
});
});
</script>
Try abstracting the toggling logic a bit. Here is your example updated – http://jsfiddle.net/jaredhoyt/Cj4rn/1/