Multiple toggles displaying in same area

rexhvn · 01-25-2013, 09:31 AM

Hi everyone...

I'm hoping to get some assistance.

I'm creating multiple search functions... lets call them as per below

Search: 1, 2, 3 and 4

All the searches are to appear in the same area just different design.

Currently my javascript is not setup correctly and the way I want it. When I click on 1, all is good. However when I click 2, it won't appear as search 1 is appearing.

My objective is to ensure that only the search function clicked on will appear, and the rest will remain hidden. IE: If 1 is clicked... appear. If 2 is then clicked, 1 should disappear and 2 appear.

This is my html code

Code:

  <div id="buyrevealed" style="display: none;">
more code for search funcion
</div>

java

Code:

function togglebuy( )

{
    var div = document.getElementById("buyrevealed");

    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}
     </script>

I have the same javascript for all 4 searches to appear.

Would love some assistance. Hope this makes sense.

Thank you.

devnull69 · 01-25-2013, 10:07 AM

Do you mean you have EXACTLY the same code for all search elements? You should make sure to change the ID attribute, because each ID attribute can only appear once per document.

rexhvn · 01-26-2013, 08:58 AM

Quote:

Originally Posted by devnull69

Do you mean you have EXACTLY the same code for all search elements? You should make sure to change the ID attribute, because each ID attribute can only appear once per document.

The ID's are different for each code....

Philip M · 01-26-2013, 09:23 AM

When you click on any search item, call a function to loop through to set all of them to style.display="none";, then set the relevant one to style.display="block";

It will make things easier if the divs have incremental ids, div1, div2 etc. But that is not essential if there are only four of them.

vwphillips · 01-26-2013, 12:07 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function togglebuy(id){
  var div = document.getElementById(id);
  if (togglebuy.div&&togglebuy.div!=div){
   togglebuy.div.style.display ="none";
  }
  div.style.display = ( div.style.display == "block" ) ? "none" : "block";
  togglebuy.div=div;
}

/*]]>*/
</script></head>

<body>

<a onmouseup="togglebuy('buyrevealed');" >Toggle buyrevealed</a>
<a onmouseup="togglebuy('tom');" >Toggle tom</a>
<a onmouseup="togglebuy('joe');" >Toggle joe</a>
  <div id="buyrevealed" style="display: none;">
more code for search funcion 1
</div>
  <div id="tom" style="display: none;">
more code for search funcion 2
</div>
  <div id="joe" style="display: none;">
more code for search funcion 3
</div>
</body>

</html>