The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Side navi load content

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #150170

    I’m trying to write some jquery as a learning experience but I’m lost on where to start.

    I’ve got a sidebar navigation and a content area where I have some div’s. I want these div’s to be hidden when the page is first loaded except for the first link and div (I would like them to be visible on load). Then when I click on another hyperlink i the sidebar, the appropriate div is shown and then previous one is hidden.


    I’m just getting to learn JQuery myself and with a bit of googling I find similar examples and then try and deconstruct them.

    In your case, it seems as though you have to find some way to associate each link with a particular div.

    So each div should have an ID and each link should have an attribute which can be associated to that ID. I found an example that uses the `name’ attribute which works quite well.

    OK…first a bit of set-up.

    We hide all the divs (I used a class of test and display:none)…then we use JS/JQ to say that when each link is clicked to get the `name’ of the link and store it in a variable (divname) and then show the div with the ID that is the same as that variable.

    In this Codepen, I have used the SlideUp/Down options to slide the divs in and out.

    Not original on my part though, I cribbed bits of it from other places on the interwebz.


    @Paulie_D – Thanks for the reply. I had been trying to find the right wording when googling and after a little more searching this morning, I found an article that mentioned the delegate function. Which I got working in a small scale ( I’ve got it working with my list items on the left but I’m not sure how to get it to work in conjunction with showing my content area.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.