Thanks for the help. I think we are getting somewhere. Here is where the page is being developed: http://banderdash.net/design/
The JavaScript you suggested is in the 'slide.js' file. Found here: http://banderdash.net/design/js/slide.js The problem I am running into now is that it appears the hide class is hiding the navigation. Because my sub-nav is itself inside the div.content (4 separate times). This was done to ensure the proper active class was shown automatically as one cycles through the sections. On viewing the page you might get a better idea of what I am trying to achieve. That is (from the black portion under the sketches), when a viewer clicks 'about' 'work' 'ramblings' or 'contact that div is swapped for the already present, but hidden other div's. Make any sense? Michael Geary-3 wrote: > > It would really help if you could post a link to a test page instead of > posting code excerpts. For example, I don't see any HTML code that has > id="link-about" and your other links. Is that missing from your page, or > did > you just omit it in the code you posted? Are the LI elements supposed to > be > those links? > > In any case, since I can't help you get the code working, at least I can > help you simplify it. Let me assume that those LI elements are your links. > Then I would change them to this: > > <ul> > <li class="clicklink" id="link-about"> # About </li> > <li class="clicklink" id="link-work"> # Work </li> > <li class="clicklink" id="link-ramblings"> # Ramblings </li> > <li class="clicklink" id="link-contact"> # Contact </li> > </ul> > > and I would change your JavaScript - it's not Java, please :-) to: > > $(document).ready( function() { > $('li.clicklink').click( function() { > $('div.content').addClass('hide'); > $( '#' + this.id.split('-')[1] ).removeClass('hide'); > }); > }); > > If that .content class is also used on other elements in your page, then I > would another classname to your four content targets and change the > $('div.content') to use that classname instead. > > -Mike > > On Tue, Nov 24, 2009 at 7:20 PM, rorourke <r...@pixelbleed.net> wrote: > >> >> I'm mostly a CSS/HTML guy, so delving into jQuery is a bit more then my >> normal task list would contain, but I'm happy to suck up any knowledge >> that >> you may be able to impart. >> >> Here is my scenario: >> >> I have four div's each has a different class in additon to the .content >> class (which controls font and link styles for each of them), .about, . >> work, .ramblings, .contact. Each of these classes is by default shown. >> But >> I've applied a class of .hide to all the ones after .about, which is the >> default shown. What I have seems to work for the first link clicked after >> page load, but after that nothing is happening. I would like, whenever a >> link is clicked to show that sections div and hide the other three. I >> never >> want more then one section showing. This adding classes business or even >> just using the .hide() .show() functions doesn't necessarily work because >> the java for the ID has to handle every situation on any given click. >> >> Markup looks like this: >> >> <ul> >> <li> # About </li> >> <li> # Work </li> >> <li> # Ramblings </li> >> <li> # Contact </li> >> </ul> >> >> <div class="content about"> >> <p>Yada</p> >> </div> >> >> <div class="content work hide"> >> <p>Yada</p> >> </div> >> >> <div class="content ramblings hide"> >> <p>Yada</p> >> </div> >> >> <div class="content contact hide"> >> <p>Yada</p> >> </div> >> >> Java looks like this: >> >> $(document).ready(function() { >> $('#link-about').click(function(){ >> $('.about').removeClass("hide"); >> $('.work').addClass("hide"); >> $('.ramblings').addClass("hide"); >> $('.contact').addClass("hide"); >> }); >> $('#link-work').click(function(){ >> $('.work').removeClass("hide"); >> $('.about').addClass("hide"); >> $('.ramblings').addClass("hide"); >> $('.contact').addClass("hide"); >> }); >> $('#link-ramblings').click(function(){ >> $('.about').addClass("hide"); >> $('.work').addClass("hide"); >> $('.ramblings').addClass("hide"); >> $('.contact').addClass("hide"); >> }); >> $('#link-contact').click(function(){ >> $('.about').addClass("hide"); >> $('.work').addClass("hide"); >> $('.ramblings').addClass("hide"); >> $('.contact').removeClass("hide"); >> }); >> }); >> -- >> View this message in context: >> http://old.nabble.com/Using-add-remove-class-vs.-show-hide-for-a-swap-out-section--tp26506957s27240p26506957.html >> Sent from the jQuery General Discussion mailing list archive at >> Nabble.com. >> >> > > -- View this message in context: http://old.nabble.com/Using-add-remove-class-vs.-show-hide-for-a-swap-out-section--tp26506957s27240p26523705.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
