Shopify Question posted in
The Shopify help center can be found here.

Show/hide block with JavaScript or jQuery – Shopify

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

3

Answers


  1. 0

    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()
    Login or Signup to reply.
  2. 0

    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";
  }
}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search