使一个JavaScript切换按钮关闭另一个

Question

I have some javascript toggle buttons; that toggle some content; and they are next to each other and work independently; the only problem is that I want it so that when you toggle one "div" on; the other one will disappear and vice versa. Right now if you toggle one and then toggle the other they both show at the same time. I have tried to change this code myself and cannot figure it out, so I was wondering if anyone knows how to adapt this. the page is here: ( http://gtdsites.com/1a-toggle-buttons/ ).

Here is my code:

<script type="text/javascript">
function toggleMe(btn,a){
    var e1=document.getElementById(a);
    if(!e1)return true;
    if(e1.style.display=="none"){
        e1.style.display="block";

        btn.value = "MENU";
    }
    else{
        e1.style.display="none";
        btn.value = "MENU";
    }
    return true;
}
</script>

<script type="text/javascript">
function toggleMe1(btn,a2){
    var e2=document.getElementById(a2);
    if(!e2)return true;
    if(e2.style.display=="none"){
        e2.style.display="block";

        btn.value = "CART";
    }
    else{
        e2.style.display="none";
        btn.value = "CART";
    }
    return true;
}
</script>


<div id="mobile_buttons_cont">
  <input class="mobile_buttons" type="button" onclick="return toggleMe(this,'gman123')"
         value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="mobile_buttons" type="button" onclick="return toggleMe1(this,'gman124')"
         value="CART">
</div>

<div id="gman123" style="display: none">
  <br/>
  <ul class="gsites_header2">
    <li class="gsites_header2">
      <a href="/contact/">CONTACT</a>
    </li>

    <li class="gsites_header2">
      <a href="/services/">SERVICES</a>
    </li>

    <li class="gsites_header2">
      <a href="/index/">INDEX</a>
    </li>
  </ul>
</div>

<div id="gman124" style="display: none">
  <br/>
  <?php
     echo do_shortcode('[do_widget id=cart66cartwidget-2]');
  ?>

</div>

Answer 1

The quickest and easiest way to do this would be to just set the display of the other one to 'none' whenever you open one. For example, you could just add this line of code document.getElementById(a2).display='none'; above e1.style.display="block"; .

If you wanted to be more robust, or if you're doing this with a lot of divs, you have a couple of options. You could put all your divs in an array and check them for whether they're open (or just set them all to display='none' if it doesn't slow you down to much). You could also create an array with the open one and push and splice them as needed. I think ultimately, though, you'd be best served by changing the CSS class of a div based on whether it's showing, and that way you can find the shown element(s) quickly using document.getElementsByClassName .

Answer 2

Your functions are nearly identical, you can combine them by making the button value a parameter. And to toggle the other DIV, pass its ID as another parameter.

<script>
function toggleMe(btn,btnval,thisdiv,otherdiv){
    var e1=document.getElementById(thisdiv);
    var e2=document.getElementById(otherdiv);
    if(!e1 || !e2) {
        return true;
    }
    if(e1.style.display=="none"){
        e1.style.display="block";
        e2.style.display="none";
    } else {
        e1.style.display="none";
        e2.style.display="block";
    }
    btn.value = btnval;
    return true;
}
</script>

<div id="mobile_buttons_cont">
  <input class="mobile_buttons" type="button" onclick="return toggleMe(this, 'MENU', 'gman123', 'gman124')"
         value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input class="mobile_buttons" type="button" onclick="return toggleMe1(this, 'CART', 'gman124', 'gman123')"
         value="CART">
</div>

Answer 3

There's a much simpler way of doing this with jQuery's .show() and .hide() .

I got rid of your functions and replaced them with jQuery I also gave the buttons id's to make selecting them easier. I've also given you 2 examples of the .show() and .hide() method.

`$("#btn_1").click(function(){
$("#btn_2").hide();
});
$("#btn_2").click(function(){
$("#btn_1").hide(); 
});
$("#btn_3").click(function(){
$("#btn_3").hide();
});
$("#btn_4").click(function(){
$("#btn_4").hide(); 
});`

here's the working demo.

http://jsfiddle.net/ryanhagz/rFp7w/