Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    65
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Multiple toggles displaying in same area

    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.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    65
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    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....

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •