Add Nested Accordion on Product page?

**RK123** · 5 Feb 2021, 03:28 PM

Originally Posted by keneso

I am not sure I understand the

I did a test on a local setup, and forgetting about the ckeditor I was able to display it.
Here is what I did:

open
includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php
place this code where you want it to display - WATCH for the width, you need that space, it is not responsive.

HTML Code:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
                           $("#accordionGiftLelo").msAccordion();
                           }
                           )
</script>

<div id="accordionGiftLelo">
  <div class="set">
    <div class="title"><img src="images/DEVIL_EYES_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/devilEyes.jpg" alt="Embroidered Devil Eyes" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/SPRING_EMBROIDERY_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/spring-emroidery.jpg" alt="Spring Embroidery" width="486" height="198" border="0" /></a></div>
  </div>

  <div class="set">
    <div class="title"><img src="images/CHARMING_FAIRY_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/charmingFairy.jpg" alt="" width="486" height="198" border="0" /></a> </div>
  </div>
  <div class="set">
    <div class="title"><img src="images/GEOMETRICAL_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/geomatical_embrodery.jpg" alt="Geometrical Embroidery" width="486" height="198" border="0" /></a><br />
    </div>

  </div>
  <div class="set">
    <div class="title"><img src="images/ELEPHANT_LUCK_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/elephant-luck.jpg" alt="Elephant with Luck" width="486" height="198" border="0" /></a></div>
  </div>
  <div class="set">
    <div class="title"><img src="images/LADY_RED_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/lady-in-red.jpg" alt="Lady in Red" width="486" height="198" border="0" /></a></div>
  </div>

  <div class="set">
    <div class="title"><img src="images/FIREWORKS_ART_1.jpg" width="29" height="198" /></div>
    <div class="content"><a href="#"><img src="images/fireworks-embroidery.jpg" alt="Fireworks Embroidery Art" width="486" height="198" border="0" /></a></div>
  </div>
</div>

Place the jquery-1.3.2.min.js and jquery.msAccordion.js in includes/templates/YOUR_TEMPLATE/jscript directory
rename jquery.msAccordion.js to jscript_jquery.msAccordion.js
place images in includes/templates/YOUR_TEMPLATE/images
change the path of images in the code above to (adding the red from following sample)
<img src="includes/templates/YOUR_TEMPLATE/images/fireworks-embroidery.jpg"

I tried the way you suggested. I tested it with local host Xampp But still having issues.
This is how the display is.

Click image for larger version.

Name: Trial.jpg
Views: 22
Size: 21.7 KB
ID: 19413

**keneso** · 5 Feb 2021, 07:01 PM

Hard to say from a screenshot.
Don't know how it was before, if you made a bit of progress, or not; as of now I see that images are not loading, all I can say is to recheck the paths, since the alt attributes are showing.

If you can put it online, others better than me could perhaps help you as well.

**RK123** · 6 Feb 2021, 04:36 AM

Originally Posted by keneso

Hard to say from a screenshot.
Don't know how it was before, if you made a bit of progress, or not; as of now I see that images are not loading, all I can say is to recheck the paths, since the alt attributes are showing.

If you can put it online, others better than me could perhaps help you as well.

My website is still under construction.
I am checking everything with local server only
Yes, I did some mistake with the path.
And this is what I got now after correcting it

Click image for larger version.

Name: Trial 2.jpg
Views: 22
Size: 34.7 KB
ID: 19414

**keneso** · 6 Feb 2021, 03:46 PM

Making progress, step by step.

I'd concentrate now on the js part, recheck paths, and filenames.
You could try to check with the browser's developer tool.

**RK123** · 7 Feb 2021, 02:42 AM

Originally Posted by keneso

Making progress, step by step.

I'd concentrate now on the js part, recheck paths, and filenames.
You could try to check with the browser's developer tool.

Yes, let me try

**keneso** · 7 Feb 2021, 02:29 PM

Originally Posted by keneso

Place the jquery-1.3.2.min.js and jquery.msAccordion.js in includes/templates/YOUR_TEMPLATE/jscript directory
rename jquery.msAccordion.js to jscript_jquery.msAccordion.js
place images in includes/templates/YOUR_TEMPLATE/images
change the path of images in the code above to (adding the red from following sample)
<img src="includes/templates/YOUR_TEMPLATE/images/fireworks-embroidery.jpg"

I removed the jscript_ from the jscript_jquery.msAccordion.js (see the bold dark red), and behaves like last image you posted.
You also need to receck the image path/name of the "tabs" as by your image they are missing.

**RK123** · 8 Feb 2021, 08:41 AM

Originally Posted by keneso

I removed the jscript_ from the jscript_jquery.msAccordion.js (see the bold dark red), and behaves like last image you posted.
You also need to receck the image path/name of the "tabs" as by your image they are missing.

Ok I will check that.
Thanks

**RK123** · 9 Feb 2021, 06:47 AM

Let me explain step by step what I did-
All the codes I used are from http://www.htmldrive.net/items/show/...n-with-jquery-

I inserted the following codes in the includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php

Originally Posted by keneso

Then I placed mscarousel.css file in includes/template/MY_Template/CSS folder.

After doing these steps the following is what I got - (The tabs have appeared now)

Click image for larger version.

Name: Trial 3.jpg
Views: 17
Size: 41.4 KB
ID: 19421

Then I placed the following in the includes/templates/MY_Template/jscript folder -
jquery.msCarousel
jquery.msCarousel-min
jquery-1.3.2.min
jquery-1.7.1.min

But still only the following is getting displayed -

I am stuck at this level now

**keneso** · 9 Feb 2021, 10:56 AM

My apologies for having forgotten to mention the css file.

That said If I understand correctly you did not follow exactly what was suggested.

Please let me retry:

In your tpl_product_info_display.php file
ncludes/templates/responsive_classic/templates/tpl_product_info_display.php
you put ONLY this

HTML Code:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
                           $("#accordionGiftLelo").msAccordion();
                           }
                           )
</script>

<div id="accordionGiftLelo">
<div class="set">
<div class="title"><img src="includes/templates/responsive_classic/images/DEVIL_EYES_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="#"><img src="includes/templates/responsive_classic/images/devilEyes.jpg" alt="Embroidered Devil Eyes" width="486" height="198" border="0" /></a></div>
</div>
<div class="set">
<div class="title"><img src="includes/templates/responsive_classic/images/SPRING_EMBROIDERY_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="#"><img src="includes/templates/responsive_classic/images/spring-emroidery.jpg" alt="Spring Embroidery" width="486" height="198" border="0" /></a></div>
</div>

<div class="set">
<div class="title"><img src="includes/templates/responsive_classic/images/CHARMING_FAIRY_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="#"><img src="includes/templates/responsive_classic/images/charmingFairy.jpg" alt="" width="486" height="198" border="0" /></a> </div>
</div>
<div class="set">
<div class="title"><img src="includes/templates/responsive_classic/images/GEOMETRICAL_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="#"><img src="includes/templates/responsive_classic/images/geomatical_embrodery.jpg" alt="Geometrical Embroidery" width="486" height="198" border="0" /></a><br />
</div>

</div>
<div class="set">
<div class="title"><img src="includes/templates/responsive_classic/images/ELEPHANT_LUCK_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="#"><img src="includes/templates/responsive_classic/images/elephant-luck.jpg" alt="Elephant with Luck" width="486" height="198" border="0" /></a></div>
</div>
<div class="set">
<div class="title"><img src="includes/templates/responsive_classic/images/LADY_RED_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="#"><img src="includes/templates/responsive_classic/images/lady-in-red.jpg" alt="Lady in Red" width="486" height="198" border="0" /></a></div>
</div>

<div class="set">
<div class="title"><img src="includes/templates/responsive_classic/images/FIREWORKS_ART_1.jpg" width="29" height="198" /></div>
<div class="content"><a href="#"><img src="includes/templates/responsive_classic/images/fireworks-embroidery.jpg" alt="Fireworks Embroidery Art" width="486" height="198" border="0" /></a></div>
</div>

Then you put in the jscript folder
includes/templates/responsive_classic/jscript/
the following two files

jquery-1.3.2.min.js
jquery.msAccordion.js

Then remember to rename the jquery.msAccordion.js to
jscript_jquery.msAccordion.js

then place in your css folder
includes/templates/responsive_classic/css
the following file

accordion.css

rename it to
stylesheet_accordion.css

It should work.

Remember to replace the jquery-1.3.2.min.js with jquery-3.5.1.min.js as suggested by lat9 in post #6

**RK123** · 9 Feb 2021, 03:12 PM

Originally Posted by keneso

It should work.

Remember to replace the jquery-1.3.2.min.js with jquery-3.5.1.min.js as suggested by lat9 in post #6

Hi,
You are guiding me well.
But still it is not displaying well.
I am not sure what the issue is --- whether there is anything wrong with the file name.
Should we not link the CSS file and JS file with HTML?

Below is what I have done -
HTML screenshot