Clash Royale CLAN TAG#URR8PPP

Jquery: button click to show an overlay with an id

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?

4 Answers
4

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 :)

$(".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();
);


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.

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.