How to show an element only on click on it and and hide it on click on other elements?

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");
  });

});

https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Arjun, Jul 29 '18 at 12:15

score 0 · Answer 1 · answered Jul 29 '18 at 12:18

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");
    }
  });

score 0 · Answer 2 · answered Jul 29 '18 at 12:27

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>

msg · Answer 3 · 2018-09-16T05:16:26.713

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>

How to show an element only on click on it and and hide it on click on other elements?

3 Answers3