0

I'm trying to finish up a redesign using the Volusion eComm system - which is a bit frustrating to work with. One of my last stop gaps is trying to achieve an accordion box on the "options_table". Volusion only gives users access to the css files of the product page template, but it is possible to insert some javascript on certain .asp pages, though not everything I have attempted with that has worked. So here is what I have done:

This is an example of what I am looking for, this site is also built in Volusion: http://www.willowst.com/Parker-Lila-Dress-p/p51870gepmoc.htm

I inserted an additional class onto the products template into the options_box table like so:

<script type="text/javascript"> 
$(document).ready( function() {
   $('#options_table').addClass( 'table table-condensed' );
} );
</script>

That worked, so then I went ahead and tried to create an accordion through CSS with this code:

/*Define Accordion box*/
#options_table { width:100%; overflow:hidden; margin:10px auto;     color:#474747; background:#414141; padding:10px; }

/*General     Accordion****************************************************************************/
/*Set style of open slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target { background:#FFF; padding:10px;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:hover { background:#FFF; }
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target h2 {width:100%;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target h2 a{ color:#333; padding:0;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target p {display:block;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr{ float:left;    overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
#options_table table > tbody > tr > td > font > i > b > br > table > tr:hover {background:#444;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr p { display:none; }
#options_table table > tbody > tr > td > font > i > b > br > table > tr:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(1):after{content:'1';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(2):after{content:'2';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(3):after{content:'3';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(4):after{content:'4';}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:nth-child(5):after{content:'5';}
/*End General Accordion****************************************************************************/

/*Vertical Accordion *************************************************************************/
#options_table table > tbody > tr > td > font > i > b > br > table > tr{ width:100%; height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
-ms-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
    /*Set height of the slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target{ height:250px; width:97%; }

#options_table tbody > tr > td > font > i > b { position:relative; left:0; top:-15px; }

    /*Set position of the number on the slide*/
#options_table table > tbody > tr > td > font > i > b > br > table > tr:after{ top:-60px;left:810px;}
#options_table table > tbody > tr > td > font > i > b > br > table > tr:target:after{ left:-9999px;}
/*Vertical Accordion *************************************************************************/

It changes some elements of the table, but I can't quite get the hang of it. Any help from more experienced users would be much appreciated!

Here is my sandbox: http://kdtnc.snwpe.servertrust.com/cybex-750T-legacy-treadmill-p/cyb-750t.htm

Thank you!

1 Answer 1

0

Your CSS code is disabled, that's why it's not working. Also, you miss the javascript to handle the onclick event.

1
  • Ah yes, buh duh. That was easy. I'm not the best with js, what would you suggest is the best way to write this? Aug 28, 2015 at 15:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.