Product Info Click on to Expand

Excursionist
58 0 4

Hello- I am looking for an app or a theme that will show product info in a list that can be clicked on to expand rather than as standard tabs.  The link below is an example of what I am looking for.  I would appreciate any suggestions or leads.  Thanks very much!

http://www.anntaylor.com/chiffon-yoke-blouse/384691?skuId=19561592&defaultColor=&colorExplode=false&...

0 Likes
Shopify Partner
42 0 4

You can accomplish this by adding some Jquery to your product.liquid template.  Here's the code for something similar that I did.  I'm not a programmer and have just figured things out by trial and error so there may be a better way to go about it but it does seem to work! If you want your description to automatically fill in there you will need to add some liquid code and may need to get someone to help you with that.  Good luck!

HTML: (Add this to the part of your product.liquid template where you want your expanding list to appear)
<div id="flip">Part 1</div>
<div id="panel">
  <p>Your text for part 1 here</p>
</div>


<div id="flip2">Part 2</div>
<div id="panel2">
<p> Your text for part 2 here</div>


<div id="flip3">Part 3</div>
<div id="panel3">
  <p>Your text for part 3 here</p></div>

JQUERY: (add this between the <script> and </script> tags at the bottom of the product.liquid template.

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});

$(document).ready(function(){
    $("#flip2").click(function(){
        $("#panel2").slideToggle("slow");
    });
});
  
  $(document).ready(function(){
    $("#flip3").click(function(){
        $("#panel3").slideToggle("slow");
    });
});

 

CSS (add this to your style.scss file under "assets")

 #panel {
    padding: 5px;
    text-align: left;
    background-color: #ffffff;
    border: solid 1px #ffffff;
}

#flip {
    padding: 5px;
    text-align: left;
    background-color: #f6f1fc;
    border: solid 1px #ffffff;
  font-weight:bold;
}

#panel {
    padding: 10px;
    display: none;
}


  
  #panel2,  {
    padding: 5px;
    text-align: center;
    background-color: #ffffff;
    border: solid 1px #ffffff;
}
  
  
  #flip2 
  {
    padding: 5px;
    text-align: left;
    background-color: #f6f1fc;
    border: solid 1px #ffffff;
    font-weight:bold;
}

#panel2 {
    padding: 10px;
    display: none;
}
  
  
  
  
    #panel3,  {
    padding: 5px;
    text-align: center;
    background-color: #ffffff;
    border: solid 1px #ffffff;
}
  
  
  #flip3 
  {
    padding: 5px;
    text-align: left;
    background-color: #f6f1fc;
    border: solid 1px #ffffff;
    font-weight:bold;
}

#panel3 {
    padding: 10px;
    display: none;
}
 
  
</style>

0 Likes
Highlighted
Excursionist
58 0 4

thank you so much laurie!

0 Likes