Jump to content

Help with Dropdowns/ Accordions on product detail pages

Recommended Posts

Dear forum members 

I had bit of code injected to add drop-down/ accordions to our product detail pages .

The code was working fine for 4 years... 

Until today and now it does not function at all across desktop and mobile. 😵‍💫

Our product detail pages are now in a bit of mess - Any help would be extremely kindly appreciated  🙏

Hoping someone can help with a fix to the code?

Best regards 

CUSTOM CSS

//TOGGLE PRODUCT DETAILS

//styles of accordion heading
.ProductItem-details-excerpt h3 {
   font-size:10px;
    cursor:pointer;
  border-bottom:0.7px solid #222;
  padding-bottom:7px;
  font-weight:400;
  }

//add a dropdown indicator (initial)
 .ProductItem-details-excerpt h3:before {
    content: "+";
    float: right;
    font-size: 130%;
    line-height: 120%;
    color: solid #222;
    font-weight: 200;
  }

//active dropdown indicator
  .ProductItem-details-excerpt h3.activedrop:before {
      content: "-";
    float: right;
    font-size: 130%;
    line-height: 120%;
    color: #222;
    font-weight: 100;
  }

//END TOGGLE

.ProductItem-details-excerpt h3 {
font-family:"Helvetica Neue" !important;
color:black;
}


table.minimalistBlack {
  font-family: Helvetica Neue, sans-serif;
  border: 1px solid #000000;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
table.minimalistBlack td, table.minimalistBlack th {
  border: 1px solid #000000;
  padding: 5px 4px;
}
table.minimalistBlack tbody td {
  font-size: 6px;
}
table.minimalistBlack thead {
  background: #CFCFCF;
  background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
  border-bottom: 3px solid #000000;
}
table.minimalistBlack thead th {
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  text-align: left;
}
table.minimalistBlack tfoot td {
  font-size: 14px;
}

CODE INJECTION FOOTER :
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
$('.ProductItem-details-excerpt h3').css('cursor','pointer');
$(".ProductItem-details-excerpt h3").nextUntil(".ProductItem-details-excerpt h3").slideToggle();
$(".ProductItem-details-excerpt h3").click(function() {$(this).nextUntil(".ProductItem-details-excerpt h3").slideToggle();});
});
</script>
<script>
$(document).ready(function(){
$(".ProductItem-details-excerpt h3").click(function() {$(this).toggleClass('activedrop');});
});
</script>

 

Screenshot 2024-05-28 at 17.14.34 copy.jpg

Link to comment
  • Replies 1
  • Views 631
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.