сделать div видимым, когда другой div активируется кнопкой

Question

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

Итак, при нажатии кнопки # show1 я хочу, чтобы div #cybernetics + div .gif1 появился, а при нажатии на кнопку # show2 я хочу, чтобы div #eat + div .gif2 появился

Это так? возможно? благодарю вас! в настоящее время у меня есть следующий код

$('document').ready(function() {
    $('#show1, #show2, #show3').click( function() {
        var $div = $('#' + $(this).data('href'));
        $('.demo').not($div).hide();
        $div.fadeToggle();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>

<div id="cybernetics" class="demo">
      <header>
        <h1>CYBERNETICS</h1>
      </header>
    </div>

<div class="gif1">
     <img src="cybernetics.gif">
</div>

 <div id="eat" class="demo">
       <header>
        <h1>E.A.T.</h1>
      </header>
</div>

<div class="gif2">
     <img src="eat.gif">
</div>

Answer 1

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

$('document').ready(function() {
    $('#show1, #show2, #show3').click( function() {
        var target = $(this).data('href');
        var $div = $('#' + target);
        $('.demo').not($div).hide();
        $(".gif img:not([src^='"+target+"'])").hide();
        $(".gif img[src^='"+target+"']").show();
        $div.fadeIn();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>

<div id="cybernetics" class="demo">
      <header>
        <h1>CYBERNETICS</h1>
      </header>
    </div>

<div class="gif">
     <img src="cybernetics.gif">
</div>

 <div id="eat" class="demo">
       <header>
        <h1>E.A.T.</h1>
      </header>
</div>

<div class="gif">
     <img src="eat.gif">
</div>

Answer 2

Я предполагаю из логики, что вы пытаетесь сохранить эту СУХУЮ, поэтому вам не нужны несколько обработчиков событий. Таким образом, вы можете выбрать целевой элемент на основе атрибута data-href нажатой кнопки, затем получить из него элемент next() и затемнить их обоих, что-то вроде этого:

$('document').ready(function() {
  $('.toggle').click(function() {
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide().next().hide();
    $div.add($div.next()).fadeToggle();
  });
});

.demo, 
.demo + div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" class="toggle" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" class="toggle" data-href="eat"><h2> ></h2></button>

<div id="cybernetics" class="demo">
  <header>
    <h1>CYBERNETICS</h1>
  </header>
</div>
<div class="gif1">
  <img src="cybernetics.gif">
</div>

<div id="eat" class="demo">
  <header>
    <h1>E.A.T.</h1>
  </header>
</div>
<div class="gif2">
  <img src="eat.gif">
</div>

Answer 3

Вы можете внести изменения в приведенный ниже код

<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>

<div class="allBox cybernetics" style="display: none;">
  <header>
    <h1>CYBERNETICS</h1>
  </header>
</div>

<div class="allBox cybernetics" style="display: none;">
  <img src="cybernetics.gif">
</div>

<div class="allBox eat" style="display: none;">
  <header>
    <h1>E.A.T.</h1>
  </header>
</div>

<div class="allBox eat" style="display: none;">
  <img src="eat.gif">
</div>

и ваш код js будет указан здесь

<script type="text/javascript">
$("#show1").on('click', function(){
    hrefVal = $(this).attr('data-href');
    $(".allBox").css('display', 'none');
    $("."+hrefVal).css('display', 'block');
})
$("#show2").on('click', function(){
    hrefVal = $(this).attr('data-href');
    $(".allBox").css('display', 'none');
    $("."+hrefVal).css('display', 'block');
})
</script>

Answer 4

Просто вы можете показать скрыть как при нажатии кнопки, так и ниже.

   

 
   $('.gif1, .gif2, #cybernetics, #eat').hide();
$('document').ready(function() {
  
    
    
    $('#show1').click( function() {
    
       $('.gif1, .gif2, #cybernetics, #eat').hide();
       $('#cybernetics').show();
       $('.gif1').show();
    });
    
    $('#show2').click( function() {
       $('.gif1, .gif2, #cybernetics, #eat').hide();
       $('#eat').show();
       $('.gif2').show();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>

<div id="cybernetics" class="demo">
      <header>
        <h1>CYBERNETICS</h1>
      </header>
    </div>

<div class="gif1">
     <img src="cybernetics.gif">
</div>

 <div id="eat" class="demo">
       <header>
        <h1>E.A.T.</h1>
      </header>
</div>

<div class="gif2">
     <img src="eat.gif">
</div>