Функции JQuery hide () и show (), перекрывающие друг друга

Question

Я пытаюсь показать и скрыть элементы на своей странице на основе кликов по коду изображения следующим образом.

jQuery(function($) {

    jQuery(".elementor-widget-image").click(function() {
        var contentPanelId = jQuery(this).attr("id");

            switch (contentPanelId) {
                      case "capacitacion":
                            console.log(contentPanelId+' has been clicked');
                            $( "#capacitacion-content" ).show( "slow");

                      break;    
                      case "practicas":
                            console.log(contentPanelId+' has been clicked');
                            $( "#capacitacion-content" ).hide( "slow");
                            $( "#bpm-content" ).show( "slow");


                      break;
            }

    });

});

Проблема в том, что когда я нажимаю, первое изображение приходит и уходит нормально, новторое изображение вообще не показывается, это логическая проблема?потому что я ясно говорю системе, что скрываю одно и показываю другое.

Answer 1

jQuery(function($) {

  $("#capacitacion-content").hide();
  $("#bpm-content").hide();

  jQuery(".elementor-widget-image").click(function() {
    var contentPanelId = jQuery(this).attr("id");



    switch (contentPanelId) {
      case "capacitacion":
        console.log(contentPanelId + ' has been clicked');
        $("#bpm-content").hide("slow");
        $("#capacitacion-content").show("slow");

        break;
      case "practicas":
        console.log(contentPanelId + ' has been clicked');
        $("#capacitacion-content").hide("slow");
        $("#bpm-content").show("slow");


        break;
    }

  });

});

.elementor-widget-image {
  cursor: pointer;
}

#capacitacion-content {
  background: red;
  height: 100px;
  width: 100px;
}

#bpm-content {
  background: green;
  height: 100px;
  width: 100px;
}

#practicas {
  margin-top: 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-widget-image" id="capacitacion">Click to test capacitacion </div>
<div class="elementor-widget-image" id="practicas">Click to test practicas</div>


<div id="capacitacion-content"> </div>

<div id="bpm-content"></div>

Answer 2

replce

$( "#capacitacion-content" ).hide( "slow"); $( "#bpm-content" ).show( "slow");

от

$("#capacitacionContent" ).hide(); $("#bpmContent" ).show();

и попробуйте