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

I am trying to hide and show a div based on button click – Shopify

Hi I am working on a shopify website.It is a step base cart functionality, And hide and show works after second step The thing here is i am trying to hide and show a div based on button click, So If i select a button one time it hides a div and If i select a button two times it hides another div, But It is not reversing the order.It means if i deselect the button it not showing the div back, it stays hide

Please help me with that
My website url: https://abmw6w36umi6wmd9-8342896758.shopifypreview.com/

Here is my code 

 <script>
var clicks = 0;

function myFunction() {
  clicks = clicks+1;
  if(clicks == 1){
    document.getElementById('twoo-step').style.display = 'block'; 
    document.getElementById('ist-step').style.display = 'none'; 
  }

}
    
    
  </script>

    <script>
   jQuery(document).ready(function () {
    var count = 0;
    jQuery(".select_btn_two").click(function () {
        if (count >= 1) {
            jQuery("#twoo-step").hide();
        } else count++

    });

}); 
    
    
  </script>
Tags:

2

Answers


  1. 0

    I have seen problems like this solved two ways. You could set a variable to true or false based on the click. So like var firstHidden = false. Then myFunction does firstHidden = !firstHidden. The other way is to use the modulus operator %. If clicks % 2 == 0 there is no remainder and toggle both one way. Else toggle both the other way.

    Login or Signup to reply.
  2. 0

    Target the div with a class and if you can’t isolate it that way you might need to use nth-child pseudo. Shopify uses jQuery, I believe, but this code can be done with vanilla js with a bit of a rewrite.

    Here’s my solution, the button works and toggles the div opacity; display none means it’s removed from the dom so I didn’t opt for that, want to keep the spacing the same.

    Toggle a class to control the visibility of the element.

    $(document).ready(function(){

$(".clickMe").click(function(){
  $(".hideDiv").toggleClass("hide");
});

});
    .hide {
opacity: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>Don't ever hide me</div>
<div class="hideDiv">Hide and show this</div>
<button class="clickMe">Click me</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search