Reputation: 5
When the buttons are clicked, they should reveal content for their respection section - the highlighted mountain for its location which I am doing by replacing the images on each button click...and it should also show the div element containing a text description below
Here (in javascript) is what I am trying to get to
// Keep track of the button currently clicked
var activeBtn = null;
function myFunction(btnId, divId) {
var x = document.getElementById("myDIV");
// If the last button is the same as the new one, show default text
if (activeBtn === btnId) {
x.innerHTML = "";
activeBtn = null
} else {
// Else show the text given to the text param
let ReplaceText = document.getElementById(divId).innerHTML;
x.innerHTML= ReplaceText;
activeBtn = btnId;
}
}
function Show5s() {document.getElementById("image").src = "/wp-content/uploads/2019/09/amsterdam-5s.png";}
function Show30n() {document.getElementById("image").src = "/wp-content/uploads/2019/09/amsterdam-30n-fitness-center.png";}
function ShowFitness() {document.getElementById("image").src = "/wp-content/uploads/2019/09/amsterdam-30n-fitness-center.png";}
function ShowPortJervis() {document.getElementById("image").src = "/wp-content/uploads/2019/09/port-jervis.png";}
function ShowSaratoga() {document.getElementById("image").src = "/wp-content/uploads/2019/09/saratoga.png";}
function ShowCliftonPark() {document.getElementById("image").src = "/wp-content/uploads/2019/09/clifton-park.png";}
I want to do this using jquery. My only issue here is that I need the current the div hidden when another button is clicked and I haven't been able to figure out how to do this..pls help
jQuery(document).ready(function($){
$('.5s-button').on({
'click': function(){
$('#change-image').attr('src','/wp-content/uploads/2019/09/amsterdam-5s.png');
$("#text1").toggle();
}
});
$('.30n-button').on({
'click': function(){
$('#change-image').attr('src','/wp-content/uploads/2019/09/amsterdam-30n-fitness-center.png');
$("#text2").toggle();
}
});
$('.pj-button').on({
'click': function(){
$('#change-image').attr('src','/wp-content/uploads/2019/09/port-jervis.png');
$("#text3").toggle();
}
});
$('.sara-button').on({
'click': function(){
$('#change-image').attr('src','/wp-content/uploads/2019/09/saratoga.png');
$("#text4").toggle();
}
});
$('.cp-button').on({
'click': function(){
$('#change-image').attr('src','/wp-content/uploads/2019/09/clifton-park.png');
$("#text5").toggle();
}
});
});
Upvotes: 0
Views: 63
Reputation: 64
You can do this by first hiding all/visible text div and then show the respective div. Also you need to change id="btn1" to class="btn1" because id should be unique. Another thing you can do is to pre load the images for faster loading. Here is the code to do this
<div class="button-container">
<input type="button" value="5S" class="5s-button btn1" />
<input type="button" value="30n" class="30n-button btn1" />
<input type="button" value="Port Jarvis" class="pj-button btn1" />
<input type="button" value="Saratoga" class="sara-button btn1" />
<input type="button" value="Clifton Park" class="cp-button btn1" />
</div>
<img id="change-image" src="/wp-content/uploads/2019/09/base-location.png"
alt="Black Image" />
<div id="text1" style="display:none;" class="textDiv">
<h2>5S</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</div>
<div id="text2" style="display:none;" class="textDiv">
<h2>30N</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</div>
<div id="text3" style="display:none;" class="textDiv">
<h2>Port Jervis</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</div>
<div id="text4" style="display:none;" class="textDiv">
<h2>Saratoga</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</div>
<div id="text5" style="display:none;" class="textDiv">
<h2>Clifton</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p>
</div>
Here is the JS
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
'/wp-content/uploads/2019/09/5s.png',
'/wp-content/uploads/2019/09/fitness.png',
'/wp-content/uploads/2019/09/port.png',
'/wp-content/uploads/2019/09/sara.png',
'/wp-content/uploads/2019/09/clift.png'
);
jQuery(document).ready(function ($) {
$('.btn1').on('click', function () {
var obj = getImageSrcText($(this).val());
$('#change-image').attr('src', obj.src);
$('.textDiv').hide();
$('#' + obj.div).show();
});
function getImageSrcText(val) {
switch (val) {
case '5S':
return { 'src': '/wp-content/uploads/2019/09/5s.png', 'div': 'text1' };
case '30n':
return { 'src': '/wp-content/uploads/2019/09/fitness.png', 'div': 'text2' };
case 'Port Jarvis':
return { 'src': '/wp-content/uploads/2019/09/port.png', 'div': 'text3' };
case 'Saratoga':
return { 'src': '/wp-content/uploads/2019/09/sara.png', 'div': 'text4' };
case 'Clifton Park':
return { 'src': '/wp-content/uploads/2019/09/clift.png', 'div': 'text5' };
}
}
});
This can be achieved by other ways like put the image src and div selector in button data attribute and get those attribute when clicked
Upvotes: 0
Reputation: 2212
You could add 2 data-attribute
to your buttons
, one with img src
and other with the target div
, like this:
<button class="btn" data-src="/wp-content/uploads/2019/09/amsterdam-5s.png" data-div="text1" >Button 1</button>
Then add a common class to all your divs
<div class="img-div"></div>
and use just one JQuery
event for all buttons
$('.btn').on('click', function(){
$('.img-div').hide() //Hide all divs
$('#change-image').attr('src', $(this).data('src')); //Change img src
$('#' + $(this).data('div')).show() //Show the target div
});
Upvotes: 2