如何仅在单击时显示一个元素并在单击其他元素时隐藏它？

Question

Description: I created two buttons and two more elements (div & section). When I click on button 1, div element will appear with background-color HotPink and/if at this moment i re-click on button 1, div element will disappear.

I also wrote a function for button 2 so that when i click on button 2, section element will appear with background-colour DarkGreen and at this moment when i click on button 2 again, section element will disappear.

I should mention that if i click on white space of body ( (document).click(event) ), both div and section elements will disapear.

Question: What function should I write to show div element when I click on button 1 and then I hide hide it when I click on button 2 or any other elements on my web page???

Demo

NOTE: I duplicated this question because I'm not interested to use any method like:

$(".button1").click(function(event){
    event.stopPropagation();
    if($(".div").css("display") == "none"){
    $(".div").css("display","block");
    $(".section").css("display","none");
    }else{
    $(".div").css("display","none");
    }
    });
    $(".button2").click(function(event){
    event.stopPropagation();
    if($(".section").css("display") == "none"){
    $(".section").css("display","block");
$(".div").css("display","none");
    }else{
    $(".section").css("display","none");
    }
    });

It would be better if you do a favour and suggest a better method instead of duplicating a line of code with different class name under different events (functions).

My codes: HTML:

<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>

<br><br>

<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>

JQuery:

$(function(){

    $(".button1").click(function(event){
    event.stopPropagation();
    if($(".div").css("display") == "none"){
        $(".div").css("display","block");
    }else{
        $(".div").css("display","none");
    }
  });

  $(".button2").click(function(event){
    event.stopPropagation();
    if($(".section").css("display") == "none"){
        $(".section").css("display","block");
    }else{
        $(".section").css("display","none");
    }
  });

  $(document).click(function(){
    $(".div").css("display","none");
    $(".section").css("display","none");
  });

});

Answer 1

The easiest way would be to start .click functions for both button 1 & 2 with:

.css("display","none");

function hidding the other element, like this:

  $(".button1").click(function(event){

    $(".section").css("display","none");

    event.stopPropagation();
    if($(".div").css("display") == "none"){
        $(".div").css("display","block");
    }else{
        $(".div").css("display","none");
    }
  });

  $(".button2").click(function(event){

    $(".div").css("display","none");

    event.stopPropagation();
    if($(".section").css("display") == "none"){
        $(".section").css("display","block");
    }else{
        $(".section").css("display","none");
    }
  });

Answer 2

Solution without JQuery... But you can use it if you really want to.

 const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document); $('.button1').addEventListener('click', ()=>{ toggle('div') }); $('.button2').addEventListener('click', ()=>{ toggle('section') }); function toggle(element){ if($('.show')){ Array.from($$('.show')).forEach((ele) => { ele.classList.remove('show'); }); } $(element).classList.add('show'); } 

 html, body { background-color: #fafafa; width: 100%; height: 100%; padding: 12px; margin: 0; } .button1 { background-color: pink; position: relative; display: inline-block; padding: 8px; border: none; margin: 0 0 6px 0; cursor: pointer; } .div { background-color: hotpink; display: none; width: 160px; height: 160px; } .button2 { background-color: green; position: relative; display: inline-block; padding: 8px; color: white; border: none; margin: 0 0 6px 0; cursor: pointer; } .section { background-color: darkgreen; display: none; width: 160px; height: 160px; color: white; } .show { display: block; } 

 <button class="button1"> Show Div Element </button> <div class="div"> I am Div Element </div> <br> <br> <button class="button2"> Show Section Element </button> <section class="section"> I am Section Element </section> 

Answer 3

This solution relies on event bubbling, so it might break if other handlers stop propagation.

Also note that it currently relies on provided html structure, but that can be tweaked easy enough.

 $(document).click(function(e) { $elem = $(e.target) // If the element is visible we shouldn't open it again needToggle = $elem.is('button') && !$elem.next().hasClass("open") $(".open").removeClass("open") // Remove all open elements if (needToggle) { $elem.next().toggleClass("open") } }) 

 html, body { background-color: #fafafa; width: 100%; height: 100%; padding: 12px; margin: 0; } .button1 { background-color: pink; position: relative; display: inline-block; padding: 8px; border: none; margin: 0 0 6px 0; cursor: pointer; } .div { background-color: hotpink; display: none; width: 160px; height: 160px; } .button2 { background-color: green; position: relative; display: inline-block; padding: 8px; color: white; border: none; margin: 0 0 6px 0; cursor: pointer; } .section { background-color: darkgreen; display: none; width: 160px; height: 160px; color: white; } .open { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button1"> Show Div Element </button> <div class="div"> I am Div Element </div> <br><br> <button class="button2"> Show Section Element </button> <section class="section"> I am Section Element </section>