Показать / скрыть div нажмите на ссылку jquery

Question

Я завершаю работу над веб-страницей: https://www.landingpagedude.ca/automate

И я хотел бы знать, как заставить пользователя щелкнуть ссылку «Нажмите здесь» в разделе «Динамики»:

Второй раздел отображается под первым, который также называется «Динамики», над разделом, который отображается первым:

Так что в случае, если второй раздел «Динамики» будет скрыт. При нажатии на ссылку «Вернуться к динамикам» вы вернетесь в первый раздел «Динамики»

Answer 1

посмотрите на эту ссылку , чтобы использовать любой атрибут как aria-selected, изменив true/false, чтобы показать текущие сведения о элементе

Answer 2

Вы можете использовать .click(...) или .on("click", ...), .hide() и .show(), чтобы сделать эту работу. Вот код, который вам понадобится.

$("#speakers-info").hide();
$(".expand-content-link").click(function() {
  $("#speakers").hide();
  $("#speakers-info").show();
});
$(".txtAlg-speakerInfo span a").click(function() {
  $("#speakers-info").hide();
  $("#speakers").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="speakers">
List of Speakers.
<a href="#" class="expand-content-link">Click Here</a>
</div>
<div id="speakers-info" style="display:none;">
Speaker Info.
<li class="txtAlg-speakerInfo span a"><span><a href="#">Back to Speakers</a></span></li>
</div>

Answer 3

Поэтому я немного поигрался с вашей страницей, и наличие jQuery позволило сделать эти изменения легкими для моей сессии. Я просто открыл консоль и набрал две строки:

$("#speakers-info ul a").on("click", function(){ 
  $("#speakers-info").hide(); 
  $("#speakers").show();
}); /* It was a one-liner, as shown below */

$("#speakers ul a").on("click", function(){ $("#speakers").hide(); $("#speakers-info").show(); })

Первый берет ссылку «Вернуться к ораторам» и использует ее, чтобы скрыть текущий элемент Div и показать раздел «Динамики». Вторая меняет операцию. Для собственного использования просто поместите эти две строки в файл custom.js, где угодно.

Конечно, вы можете скрыть информацию о # колонках по умолчанию.