Add Nested Accordion on Product page?

[RK123]

Hi,
I want to add nested accordion on the products page. The accordion should have options to add text, images,links and embed videos
There are umpteen number of sources available online that provide the code for this. But somehow I am not able to make it work on my products page using ckeditor.
I want something like the following on the products page ( which I can add in each product page using ckeditor) -
http://www.htmldrive.net/items/demo/...n-with-jQuery- (Nested Accordion)
I want help how and where to insert the code and other steps to make this accordion functional.

[swguy]

Have you pulled in the extra javascript required to do this?

[RK123]

Have you pulled in the extra javascript required to do this?

Yes, the code has been provided in the following link -

http://www.htmldrive.net/items/show/...n-with-jquery-

[swguy]

If you post a link to a page that's not working, I (or someone else) might be able to figure out what's wrong.

[keneso]

I am not sure I understand the

But somehow I am not able to make it work on my products page using ckeditor.

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.

<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"

[lat9]

Place the jquery-1.3.2.min.js and jquery.msAccordion.js in includes/templates/YOUR_TEMPLATE/jscript directory

Noting that the suggested version of jQuery is woefully old and hackable; current version is 3.5.1 (https://jquery.com/),

[RK123]

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:

Thanks.
I would like to have different accordion for different product pages.
Is your suggestion still applicable for that also?

I have multiple products and I wish to insert different accordions in different product pages. And I thought it would be easier to use the ckeditor in the products page on the admin side.Is there a way to do it?

[RK123]

Noting that the suggested version of jQuery is woefully old and hackable; current version is 3.5.1 (https://jquery.com/),

Ok, I will use the current version

[keneso]

Thanks.
I would like to have different accordion for different product pages.
Is your suggestion still applicable for that also?

I have multiple products and I wish to insert different accordions in different product pages. And I thought it would be easier to use the ckeditor in the products page on the admin side.Is there a way to do it?

I would say it is possible, and perhaps there would be different possible approaches.
I would get inspiration from the following thread:
https://www.zen-cart.com/showthread....egory-products

I would probably create different accordions, place them in a specific directory, and call them based on the product id as suggested in the linked thread.

Sorry, but my knowledge stops here. Maybe some of the great coders here will be of more help.

[keneso]

Noting that the suggested version of jQuery is woefully old and hackable; current version is 3.5.1 (https://jquery.com/),

Yep, thank you for pointing it out, I just used the one in the package.