Reusable Expanding Element Function

[deldalton 0]

Hello,

 

I'm trying to create a navigation system. I have a header, that includes the main navigation Titles contained within an unordered list. Outside of the header, and directly after it, are multiple nav elements each containing another unordered list. The initial value of their height style attribute is 0px so that the nav is hidden from the user's view.

 

The idea is that when a user clicks on any of the Titles, its relevant sub-titles will appear in an expanding nav element below the header. I already have working JavaScript that can expand a specified element's height, using two classes that define different heights,and switching between them and a different event when triggered. I'm not sure if it's the best approach but it's what I've put together so far. Please make any appropriate suggestions that could improve it.

 

I believe it's possible to create one generic function that can be invoked by each individual trigger (that's the onclick on the initial title) to expand its relevant nav element. But, unfortunately, I don't know how.

 

I can, of course, do it the long way and create a function specific to each nav element and its trigger but that's really not ideal.

 

What would be the key to make my function generic and reusable?

 

Here's my HTML, CSS, and Javascript.

<header>     <ul          <li><a onclick="expandNav()">Title 1</a></li>          <li><a onclick="expandNav()">Title 2</a></li>          <li><a onclick="expandNav()">Title 3</a></li>     </ul></header><nav id="nav1" class="collapsed">     <ul>          <li><a>Link A1</a></li>          <li><a>Link A2</a></li>          <li><a>Link A3</a></li>          <li><a>Link A4</a></li>          <li><a>Link A5</a></li>     </ul></nav><nav id="nav2" class="collapsed">     <ul>          <li><a>Link B1</a></li>          <li><a>Link B2</a></li>          <li><a>Link B3</a></li>          <li><a>Link B4</a></li>          <li><a>Link B5</a></li>     </ul></nav><nav id="nav3" class="collapsed">     <ul>          <li><a>Link A1</a></li>          <li><a>Link A2</a></li>          <li><a>Link A3</a></li>          <li><a>Link A4</a></li>          <li><a>Link A5</a></li>     </ul></nav>

header {     width: 100%;     background-color: white;     opacity: 0.9;     position: fixed;     z-index: 1;}nav {     display: inline;;     position: fixed;     overflow: hidden;     z-index: 1;     background-color: white;     opacity: 0.9;     margin: 100px 0 0 0;     width: 100%;     text-align: center;}ul {     display: inline-block;     margin: 40px 0 0 50px;}li {     display: inline;     padding: 0 20px 0 20px;     color: grey;}.expanded {     height: 200px;}.collapsed {     height: 0px;}

function expandNav() {     targetTitle.setAttribute("onclick", "collapseNav()");     targetElement.setAttribute("class", "expanded");}function collapseNav() {     targetTitle.setAttribute("onclick", "expandNav()");     targetElement.setAttribute("class", "collapsed");}

[deldalton 0]

I've amended my JavaScript to have two parameters passed into the called function.

function expandNav(link, element) {     targetTitle.setAttribute("onclick", "collapseNav()");     targetElement.setAttribute("class", "expanded");}function collapseNav(link, element) {     targetTitle.setAttribute("onclick", "expandNav()");     targetElement.setAttribute("class", "collapsed");}

Now, the HTML elements look like this.

<li><a id="Title 1" onclick="expandNav(this, nav1)">Title 1</a></li>

It seems to work. Except, of course, that my the targetTitle.setAttribute("onclick", "collapseNav()"); doesn't have any parameters passed into the the onclick function, and I'm not sure how to pass the correct values into it.

 

I tried this targetTitle.setAttribute("onclick", "collapseNav(this, element)");

 

But this clearly won't work. I believe the first parameter is fine. It's the second one. I don't know how to target the target element.

Edited January 29, 2015 by deldalton

[justsomeguy 1,135]

Use a closure:

targetTitle.setAttribute("onclick", function() { collapseNav(link, element); });

[deldalton 0]

Thanks for taking the time to reply, justsomeguy.

 

I've changed my approach a little so that I no longer need to update the onclick attribute value. Instead, rather than updating it to another value so that it can be clicked to collapse, I've used the onmouseleave event to trigger the collapse of the nav bar. It works beautifully now.