Переключение между двумя DIV, нажав на них (без кнопки)

Question

Я работаю с Bootstrap опциями свертывания, и в настоящее время у меня есть это:

<div class="card">
    <a data-target="#collapse1" data-toggle="collapse">
        <div class="cardbody">
        <div class="collapse show" id="collapse1">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed ligula sollicitudin, facilisis lacus sit amet, ullamcorper metus. Aliquam finibus aliquet sem, maximus tincidunt erat. Etiam sollicitudin dui pharetra, ultrices felis vitae, tincidunt odio. Nullam fringilla porttitor purus in vulputate. Maecenas quam tortor, auctor nec bibendum at, ornare condimentum arcu. Duis a diam scelerisque, dignissim mi a, ultricies lacus. 
        </div>
     </div>
      </a>
    </div>

https://jsfiddle.net/cwh0xo2e/1/

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

Но есть ли благородное решение для переключения между двумя различными div-объектами подобным образом?

Answer 1

Да, спрячьте одного и покажите другой div:

function toggleDivs() {
  $('.content').toggleClass('active')
}

.content {
  border: 1px solid blue;
  padding: 30px;
  color: white;
  font-weight: bold;
  display: none;
}

.active {
  display: block;
}

.c1 {
  background-color: red;
}

.c2 {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrapper" onClick="toggleDivs()">
  <div class="active content c1"> CONTENT 1</div>
  <div class="content c2"> CONTENT 2 </div>
</div>