Jquery скрыть все остальные div по нажатию кнопки

Question

Когда кнопки нажимаются, они должны показывать контент для своего раздела респектирования - выделенную гору для ее местоположения, которую я делаю, заменяя изображения при каждом нажатии кнопки ... и также должен отображаться элемент div, содержащий текстописание ниже

Здесь (в javascript) я пытаюсь добраться до

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

Я хочу сделать это с помощью jquery.Моя единственная проблема здесь заключается в том, что мне нужно скрыть текущий div, когда нажата другая кнопка, и я не смог выяснить, как это сделать .. Справка по программе

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

Вы можете добавить 2 data-attribute к вашему buttons, один с img src, а другой с целью div, например:

<button class="btn" data-src="/wp-content/uploads/2019/09/amsterdam-5s.png" data-div="text1" >Button 1</button>

Затем добавьте общий класс для всех вашихdivs

<div class="img-div"></div>

и использовать только одно JQuery событие для всех 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
});

Answer 2

Вы можете сделать это, сначала скрыв весь видимый текст div, а затем отобразив соответствующий div.Также вам нужно изменить id = "btn1" на class = "btn1", потому что id должен быть уникальным.Еще одна вещь, которую вы можете сделать, это предварительно загрузить изображения для более быстрой загрузки.Вот код для этого

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

Вот 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' };
        }
    }
});

Это может быть достигнуто другими способами, такими как установка селектора изображения src и div в атрибут данных кнопки и получениеэти атрибуты при нажатии