Endlessjoy Posted May 28 Posted May 28 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>
tuanphan Posted May 31 Posted May 31 If you share link to product in screenshot, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment