CODEWITHSUNDEEP
javascriptcssonclick
Tyson of the Northwest
Tyson of the Northwest

Reputation: 2143

Apply css to classes with onclick events

I have a menu on the left of my page that is made of nested uls. On the right of my page I have a series of content div's that all have a class that corresponds with the menu link on the left. When you click a menu link on the left it needs to hide all of my content divs, then show only those that have the corresponding class. So if you click the link "Implementation/System development" the page will first hide all divs of class "content", then show all divs of class "content5".

As a complication to this the menu has some javascript attached to the ul's that show and hide the nested menues. I don't want to touch it or interfere with it because it works. Also I don't think it would be usable to solve my problem because it watches all menu li's and I don't know how to tie one menu items action to that general function.

What I think I need is to add an onclick event that sets the display of all my content divs to none, and sets a subset to block. The menu is generated server side, so I can add attributes to it.

My thought process is chance the menu links to:

<a href="#" onclick="swap_content(content5)">Implementation/System development</a>

Then have code that changes the css like:

swap_content([target]){
    div.content{ display:none;}
    div.[target]{ display:block;}
}

That way it hides all the currently displayed content then only shows the content tied to that link.

<div class='content content26 content27 content28 content29 content30'></div>
  1. Will using onclick interfere with the expanding/collapsing from jquery? I think that the opening and closing rely on watching the class of the ul's, ul.menu1, ul.menu2 and so on since there are no onclick events.
  2. I can't think of a way to associate the link with it's target content on the server side other than explicitly passing it to the swap_content function in the onclick.

I am completely new to javascript so this may be completely boneheaded, but any help or guidance would be appreciated. The test page is up here if you want to take a look. In the example the content divs are already set to display:none;.

The code driving the opening and closing of the menu is at http://nwi.pdx.edu/jQueryScripts/pubs-search-script.js but like I said, it works, I really don't want to touch it all that much.

Upvotes: 0

Views: 9628

Answers (1)

Working Title
Working Title

Reputation: 254

First set the display propert of the divs and all content in them to "inherit.

From that put them all in a container such as a span or div tag then in that span or div add the following code:

onclick="style.display = 'none'"

That will hide everything in that tag that inherits the display property from it.

Update: give the tag that contains all the divs that you want to hide an id such as id = "thing".

Your hide function should look something like:

function hide ()
 {
  document.getElementById("thing").style.display = "none";
 }

then in your html on the item you want to click to make it happen add

onclick="hide()"

Update Numerou Dos: You can use JavaScript's JQuery library to select by class by doing something like:

$(."hider").click(function(){$(".myClass").css("display","none");});

Where myClass is the name of your class and hider is the class of whatever it is your clicking to make it happen. Also if you do it this way (there's a couple others ways to do it using class selectors) remove the onclick function from your hider.

Upvotes: 1

Related Questions