Apologies for the confusing title, I struggled to find the right words to describe this situation!
Essentially, I have a webpage that displays content on the same page using jQuery. When the page initially loads, a brief section opens up. However, when you click on another link, the current content should close and the new content should load. I've attempted ".show(0).siblings().hide(0);" but it ends up hiding everything and only showing the specific div.
Below is the code snippet:
<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>