After going through numerous posts, it's become apparent that my lack of experience with jQuery is causing me some challenges. There are many solutions similar to what I am trying to achieve.
Within a div, I have a vertical navigation bar consisting of buttons.
What I aim to do is have child divs inside that will be displayed or hidden depending on which navigation button the user clicks.
All these divs should occupy the same location on the screen, functioning like tabs but with vertical navigation.
I'm struggling to determine the best approach for showing and hiding each div when its respective button is clicked compared to another div.
Here's the HTML code for the Navigation:
<div id="lowerDetail">
<div id="lowersectionmenu">
<ul>
<li><a href="#Notes" title="Notes">Notes</a></li>
<li><a href="#People" title="People">People</a></li>
<li><a href="#NextTab" title="Next Tab">Next Tab</a></li>
<li><a href="#LastTab" title="LastTab">Last Tab/a></li>
</ul>
</div>
<div id="Notes">
<form>
<input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="100" />
<button type="submit" class="noteEntryButton" id="sendNote" value="Submit" class="buttonAddNote">Submit Note</button>
</form>
</div>
<div id="People">
<form>
<input type="text" name="addName" id="addName" placeholder="Name" size="35" />
<input type="text" name="addPhone" id="addPhone" placeholde="XXX-XXX-XXXX" size="15" />
</form>
</div>
<div id="NextTab">Next Tab </div>
<div id="LastTab">Last Tab </div>
</div>
Even though this setup is simple, here's the CSS related to it as well:
#lowersectionmenu {
float:left;
width: 120px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#lowersectionmenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#lowersectionmenu li a:link, #lowersectionmenu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.png);
padding: 8px 0 0 10px;
}
#lowersectionmenu li a:hover {
color: #26370A;
background: url(images/menu1.png) 0 -32px;
padding: 8px 0 0 10px;
}
#lowersectionmenu li a:active {
color: #26370A;
background: url(images/menu1.png) 0 -64px;
padding: 8px 0 0 10px;
}
#lowersectionmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.noteEntryField {
position:relative;
top:20px;
}
.noteEntryButton {
position:relative;
top:20px;
height:27px;
outline:none;
text-align:center;
background: #66ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#669933));
background: -moz-linear-gradient(top, #66cc33, #669933);
font-size:14px;
border-radius:4px;
color:#606060;
text-shadow:2px 2px 2px #f0f0f0;
}
Now all I need is the appropriate jQuery code to work its magic.
I welcome any assistance provided.
I've tried implementing the given jQuery code, but unfortunately, it's not working as expected. All divs remain visible, and the form fields are stacked on top of each other no matter what I try.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#lowersectionmenu a').click(function() {
/* hide any previous active nav and remove activeClass, fails quietly if none found*/
$('.navActive').hide().removeClass('navActive');
/* create ID selector from this link */
var id = $(this).attr('href') /* or using native script this.href*/
/* will return string "#Notes" which is exactly the same as ID selector string for jQuery*/
/* show proper item and add active class used to find open element above*/
$(id).show().addClass('navActive');
return false; /* prevent browser default events for anchor tag */
});
</script>