Show/hide block with JavaScript or jQuery

Question

I have a block of HTML and image running in Shopify I'd like to display and hide on click of the image. I am new to jQuery, can you help please?

<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>

this is the block I'd like to display and hide on click of the image,

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

W3school or jQuery Documentation should help you [jQuery Effects - Hide and Show](https://www.w3schools.com/jQuery/jquery_hide_show.asp) — Jax-p, Oct 14 '19 at 11:54
Possible duplicate of [Show/hide 'div' using JavaScript](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — Pratik, Oct 14 '19 at 11:55

score 0 · Answer 1 · answered Oct 14 '19 at 12:07

From 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";
  }
}

score 0 · Answer 2 · answered Oct 14 '19 at 14:16

Here's the edited code snippet for you. Please make sure you set the src for img tag.

<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>

score -1 · Answer 3 · answered Oct 14 '19 at 11:56

-1

First you must set an id to the element you want to hide or show, after doing so you can use jquery's show() and hide() method.

Example:

$('#YOURID').show()
$('#YOURID').hide()

answered Oct 14 '19 at 11:56

Guilherme Martin

837
1
11
22

Show/hide block with JavaScript or jQuery

3 Answers3