Hiding div on button click

Question

I have a script which has three buttons which shows a div when clicked, now my question is how do I hide those div's so let's say div 1 is opened and I click to open div 2, then make it show div 2 but hide div 1 so that I can have the div's be in the same position, but they only show if they are supposed to.

My script:

  <!-- SUPPORT CONTACT FORM START-->
            <div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showSupForm()"/>
                    <div id="contactSupportForm">
                        TEST
                    </div>
                </div>

            <script type="text/javascript">
                function showSupForm() {
                document.getElementById('contactSupportForm').style.display = "block";
                }
            </script>
            <!-- SUPPORT CONTACT FORM ENDING-->

            <!-- BUSINESS CONTACT FORM START-->
            <div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showBusForm()"/>
                    <div id="contactBusinessForm"> 
                        TEST
                    </div>
                </div>

            <script type="text/javascript">
                function showBusForm() {
                document.getElementById('contactBusinessForm').style.display = "block";
                }
            </script>
            <!-- BUSINESS CONTACT FORM ENDING-->

            <!-- OTHER CONTACT FORM START-->
            <div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showOtherForm()"/>
                    <div id="contactOtherForm">
                        TEST
                    </div>
                </div>

            <script type="text/javascript">
                function showOtherForm() {
                document.getElementById('contactOtherForm').style.display = "block";
                }
            </script>
            <!-- OTHER CONTACT FORM ENDING-->

css part:

#contactSupportForm{
    display: none;
}

#contactBusinessForm{
    display: none;
}

#contactOtherForm{
    display: none;
}

Here is a JSFiddle to show the whole process of how it works. http://jsfiddle.net/m0jdv6u0/3/

Is [this](http://jsfiddle.net/lalu050/m0jdv6u0/11/) what you want? — Lal, Mar 28 '15 at 17:45
This can be greatly simplified using [jQuery toggle()](http://api.jquery.com/toggle/) — wahwahwah, Mar 28 '15 at 17:47
@wahwahwah adding a library just to hide/show elements is not a solution. — Yatrix, Mar 28 '15 at 17:48
http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — Yatrix, Mar 28 '15 at 17:49
@Yatrix to use jQuery toggle() no external library has to be used.its just a method in jquery. — Lal, Mar 28 '15 at 17:49
@Yatrix ofcourse it has to be done.but the effort that should be taken will become lesser. — Lal, Mar 28 '15 at 17:52
@Lal Of course it's easier to use jQuery, but he shouldn't add jQuery just so he could use toggle(). Regardless, he asked for a JavaScript solution, indicated by both the code and question tags. — Yatrix, Mar 28 '15 at 17:53
@Yatrix - a suggestion, not a solution - thats what comments are for. — wahwahwah, Mar 28 '15 at 17:57
@wahwahwah Of course. I was suggesting it was a bad suggestion, which is what the comments are for, as you said. — Yatrix, Mar 28 '15 at 17:58
@Yatrix - why in the world would suggesting a library that is broadly used for this functionality be a bad suggestion? You're simply trolling at this point. Also, I didn't say he *should* use it, only mentioned that it makes this sort of thing simpler. — wahwahwah, Mar 28 '15 at 18:01
@wahwahwah I'm not trolling at all. The OP asked for a JavaScript solution to do **one** thing. You suggested adding an entire library to do this one thing. That's a **bad** suggestion. If OP had need for the library throughout the site, then I would totally agree with you. But the OP never mentioned that need. — Yatrix, Mar 28 '15 at 18:10
@Yatrix - This is semantics. What I said, meant, and is absolutely true is that jQuery *simplifies* what the OP is trying to accomplish. I didn't say "they need/ought" use it (which, you're right, would be a bad suggestion in this case.) — wahwahwah, Mar 28 '15 at 18:59
@wahwahwah whatever helps you sleep at night, man. Have a good weekend. — Yatrix, Mar 28 '15 at 19:05
Thank you very much for your answers, they all do the thing I want in different ways, although I have chosen to use the script Lal made in the JSfiddle. — DevLiv, Mar 28 '15 at 21:56

score 2 · Accepted Answer · answered Mar 28 '15 at 17:40

You could try this:

function showOtherForm(idElement) {
    document.getElementById('contactOtherForm').style.display = "none";
    document.getElementById('contactSupportForm').style.display = "none";
    document.getElementById('contactBusinessForm').style.display = "none"
    document.getElementById(idElement).style.display = "block"
}

And you call in each button passing the id of the div, like this:

showOtherForm('contactOtherForm')

Of course, you can make some verifications, so you don't need to set the display on the 3 divs, but I think you dont need that...

Hope it helped!

score 1 · Answer 2 · answered Mar 28 '15 at 18:00

There's probably a more elegant way to use classes as selectors and achieve the same functional goal, but here's a solution that would enable you to add additional form / button elements without having to add additional show/hide blocks:

[Note - this is not significantly different from @Cleversou's answer]

function showForm(elemId){
    var arr = ["Other", "Business", "Support"] ;
    for(var i = 0; i < arr.length; i++){
        if(elemId === "contact" + arr[i] + "Form"){
            document.getElementById(elemId).style.display = "block";
        } else {
            document.getElementById("contact" + arr[i] + "Form").style.display = "none";
        }
    }
}

#contactSupportForm{
 display: none;
}

#contactBusinessForm{
 display: none;
}

#contactOtherForm{
 display: none;
}

<!-- SUPPORT CONTACT FORM START-->
       <div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showForm('contactSupportForm')"/>
         <div id="contactSupportForm">
          TEST
         </div>
        </div>
       
       <script type="text/javascript">
        
       </script>
       <!-- SUPPORT CONTACT FORM ENDING-->
        
       <!-- BUSINESS CONTACT FORM START-->
       <div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showForm('contactBusinessForm')"/>
         <div id="contactBusinessForm"> 
          TEST
         </div>
        </div>
        
       <script type="text/javascript">
        
       </script>
       <!-- BUSINESS CONTACT FORM ENDING-->
       
       <!-- OTHER CONTACT FORM START-->
       <div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showForm('contactOtherForm')"/>
         <div id="contactOtherForm">
          TEST
         </div>
        </div>
        
       <script type="text/javascript">
        
       </script>
       <!-- OTHER CONTACT FORM ENDING-->

Hiding div on button click

2 Answers2