Jquery hide all other div on button click

Question

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

Answer 1

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

Answer 2

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