Показать / скрыть блок с помощью JavaScript или jQuery - PullRequest
Новая
       1

Показать / скрыть блок с помощью JavaScript или jQuery

0 голосов
/ 14 октября 2019

У меня есть блок HTML и изображение, работающее в Shopify, которое я хотел бы отобразить и скрыть при нажатии на изображение. Я новичок в jQuery, не могли бы вы помочь, пожалуйста? 

<div class="team__member grid__column grid__column--one-half-medium grid__column--one-quarter-large">
    <h3>CEO&WRITER</h3>
    <p class="font-size--smaller">The CEO maintains an active involvement in all aspects of the company, despite not having slept since 2016.</p>
    {% include 'image--asset', width: 1000, height: 836,  src: 'TEAM_CEO__CLEANUP_BC.png'%}
</div>

это блок, который я хотел бы отобразить и скрыть при нажатии на изображение, 

<div style="display: block;width: 100%!important;height: 200px;padding: 5px;background-color:yellow;background-image:linear-gradient(#c2aa00,#de490f); "> </div>

Ответы [ 3 ]

0 голосов
/ 14 октября 2019

Из w3schools: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

html: 

<button onclick="myFunction()">Click Me</button>
<div id="myDIV">
  This is my DIV element.
</div>

Javascript: 

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
0 голосов
/ 14 октября 2019

Вот отредактированный фрагмент кода для вас. Пожалуйста, убедитесь, что вы установили src для тега img. 

<head>

    //class that toggle to show or hide
    <style>
        .hide { display: none! important;}
    </style>

</head>

<body>

    <div class="team__member grid__column grid__column--one-half-medium grid__column--one-quarter-large">
        <h3>CEO&WRITER</h3>
        <p class="font-size--smaller">The CEO maintains an active involvement in all aspects of the company, despite not having slept since 2016.</p>
      <img onclick="fun()" src="#putimagesourcehere"></div>

        <div id="tog" class=" " style="width: 100%!important;height: 200px;padding: 5px;background-color:yellow;background-image:linear-gradient(#c2aa00,#de490f);"> </div>

        //funcion to toggle class
        <script>
            function fun() { document.getElementById("tog").classList.toggle("hide");}
        </script>

</body>

</html>
0 голосов
/ 14 октября 2019

Сначала вы должны установить идентификатор для элемента, который хотите скрыть или показать, после этого вы можете использовать метод show() и hide() в jquery.

Пример: 

$('#YOURID').show()
$('#YOURID').hide()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...