Jquery: button click to show an overlay with an id

Question

I have multiple buttons and overlays. On click of a button, I want it to show a specific overlay attached to each button.

 $(".button").click(function() { $(".overlay:visible").hide(); $("#" + $(this).attr("data-showdiv")).show(); }) 

 .overlay { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <button class="button" id="button1" href="#" data-showdiv="overlay1">Click here for more Information</button> </div> <div class="overlay" id="overlay1"> <h1>Title</h1> <img src="" alt="topic image"> <p>Topic text 1</p> <p class="cross">X</p> </div> 

How can I get this to function to show the correct overlay for each button?

Answer 1

Hope will help you demo for you

css:

.overlay {
  display: none;
}

HTML:

<div>
  <button class="button" id="button1" href="#" data-showdiv="overlay1">Click here for more Information</button>
   <button class="button" id="button2" href="#" data-showdiv="overlay2">Click here for more Information</button>
    <button class="button" id="button3" href="#" data-showdiv="overlay3">Click here for more Information</button>
</div>

<div class="overlay" id="overlay1">
  <h1>Title</h1>
  <img src="" alt="topic image">
  <p>Topic text 1</p>
  <p class="cross">X</p>
</div>
<div class="overlay" id="overlay2">
  <h1>Title2</h1>
  <img src="" alt="topic image">
  <p>Topic text 2</p>
  <p class="cross">X2</p>
</div>
<div class="overlay" id="overlay3">
  <h1>Title3</h1>
  <img src="" alt="topic image">
  <p>Topic text 3</p>
  <p class="cross">X3</p>
</div>

js:

$(".button").click(function() {
  $(".overlay:visible").hide();
  $("#" + $(this).attr("data-showdiv")).show();
})

Please respond if you do not agree :)

Answer 2

$(".button").on('click', function(e){
    var elId = $(this).data('showdiv'); // Get data attribute
    $(".overlay").hide(); // Hide all overlays
    $("#"+elId).show(); // Better add # direct to data attribute for element, so here we can remove this, btw.: data-showdiv="#overlay1", js: $(elId).show();

    e.preventDefault();
});

Answer 3

This how to solve your issue. You almost there but need to do some tweaking.

HTML

 <button class="button" id="button1" href="#" data-showdiv="overlay1">Click here for more Information</button>    
 </div>

 <div class="overlay" id="overlay1">
     <h1>Title</h1>
     <img src="" alt="topic image">
     <p>Topic text 1</p>
     <p class="cross">X</p>
</div>

<br/><br/>

 <button class="button" id="button2" href="#" data-showdiv="overlay1">Click here for more Information</button>    
 </div>

 <div class="overlay" id="overlay1">
     <h1>Title</h1>
     <img src="" alt="topic image">
     <p>Topic text 1</p>
     <p class="cross">X</p>
</div>

JS

$(".button").click(function() {
 $(this).next('.overlay').show();
})

CSS

.overlay {
  display: none;
}

DEMO

Let me know if this solve your issue.

Answer 4

Using the data attribute that is set

 $(".button").on('click', function(){ var id = $(this).attr("data-showdiv"); $("#overlay_"+id).show(); //console.log(id); testing to see if the id is correct }); 

 .overlay { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class="button" id="button_1" href="#" data-showdiv="1">Click here for more Information</button> </div> <div class="overlay" id="overlay_1"> <h1>Title 1</h1> <img src="" alt="topic image"> <p>Topic text 1</p> <p class="cross">X</p> </div> <div> <button class="button" id="button_2" href="#" data-showdiv="2">Click here for more Information</button> </div> <div class="overlay" id="overlay_2"> <h1>Title 2</h1> <img src="" alt="topic image"> <p>Topic text 2</p> <p class="cross">X</p> </div>