Question

Currently I’m able to click on a title and then the information relating to the title is shown. If another title is selected then it is opened either below or above the previous open title, if the title is clicked a second time then they are hidden.
What I’m trying to do is, if a title is already open, upon clicking on another title it would hide the previous and show the most recently clicked.

The javascript I’m currently working with is the following

<script type="text/javascript">
 function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
 }

 function hide(divID) {
    var item = document.getElementById(divID);
    if (item == 'element_name') {
        item.className=(item.className=='hidden');
    }
 }

Answer 1

Suggestion #1

Give all of the title elements a common class name, e.g. title, then use document.getElementsByClassName('title') to find all of the title elements, and hide them all before “unhiding” the clicked title, if the clicked title element is hidden.

That being said, you’ll need to modify the two functions you wrote to accommodate multiple classes in an element. You can easily set multiple class names via element.className = 'unhidden title', but your code will be rather inflexible. Your code will quickly become unwieldy as you try to modify your list of class names via the String#split method, looping through the classes to find and delete the hidden or unhidden classes.

Suggestion #2

Do not to use an unhidden class. Presumably, your unhidden class is defined as follows:

.unhidden {
  display: block;
}

This class becomes much less useful if you have inline elements as well that you want to unhide because you’ll need another class:

.unhidden-inline {
  display: inline;
}

If you simply define:

.hidden {
  display: block;
}

and add or remove the hidden class to hide or show the element, then you can avoid this issue altogether. You’ll still have the issue of dealing with multiple class names in an element, however.

Suggestion #3 (ideal)

Use jQuery or Zepto.js to handle DOM traversal and manipulation, it will make your life much easier. You’ll no longer need to manipulate classes at all in this case, you can simply hide and show the elements directly with convenience methods. Include jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Assuming the following markup:

<ul>
  <li class="title">
    Title 1
    <div class="description">Best. Title. Ever.</div>
  </li>
  <li class="title">
    Title 2
    <div class="description">Second best title</div>
  </li>
  <li class="title">
    Title 3
    <div class="description">Worst. Title. Ever.</div>
  </li>
</ul>

and the following css:

<style type="text/css">
  .description {
    display: none;
  }
</style>

you can do the following to accomplish your goal in a flexible manner:

<script type="text/javascript">
  $('.title').click(function(event){
    currentDescriptionElement = $('.description', this); // this refers to the clicked DOM element in this context
    isHidden = currentDescriptionElement.is(':hidden');

    $('.title .description:visible').hide(); // hide all visible description elements

    if (isHidden)
      currentDescriptionElement.show();
  })
</script>

I hope this helps, good luck!