Методы изменения видимости с помощью события onclick: JavaScript, jQuery и CSS - Fcodenotes

Вот несколько способов достижения функциональности «видимости изменения при нажатии»:

JavaScript со встроенным обработчиком событий: вы можете использовать встроенные обработчики событий в HTML, чтобы напрямую изменять видимость элемента при щелчке другого элемента. Например:

<button onclick="document.getElementById('elementId').style.visibility = 'hidden'">Click to Hide</button>

JavaScript с прослушивателями событий: вы можете использовать JavaScript для прикрепления прослушивателей событий к элементам и определения функций, которые изменяют видимость нужного элемента. Например:

<button id="buttonId">Click to Hide</button>
<script>
  document.getElementById('buttonId').addEventListener('click', function() {
    document.getElementById('elementId').style.visibility = 'hidden';
  });
</script>

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

<button id="buttonId">Click to Hide</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#buttonId').click(function() {
    $('#elementId').hide();
  });
</script>

Классы CSS и переключение. Вы можете определить классы CSS с различными свойствами видимости и использовать JavaScript или jQuery для переключения этих классов на нужный элемент. Например:

<style>
  .hidden {
    visibility: hidden;
  }
</style>
<button id="buttonId">Click to Toggle</button>
<div id="elementId">Visible content</div>
<script>
  document.getElementById('buttonId').addEventListener('click', function() {
    document.getElementById('elementId').classList.toggle('hidden');
  });
</script>