Аккордеон на странице товаров Volusion

Question

Я пытаюсь завершить редизайн, используя систему Volusion eComm - с которой немного сложно работать. Один из моих последних пробелов - попытка создать аккордеонную рамку на "options_table". Volusion предоставляет пользователям только доступ к файлам css шаблона страницы продукта, но есть возможность вставить некоторые javascript на определенные страницы.asp, хотя не все, с чем я пытался работать, работали. Итак, вот что я сделал:

Это пример того, что я ищу, этот сайт также построен в Volusion: http://www.willowst.com/Parker-Lila-Dress-p/p51870gepmoc.htm

Я вставил дополнительный класс в шаблон товаров в таблицу options_box следующим образом:

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

Это сработало, поэтому я попытался создать аккордеон через CSS с помощью этого кода:

/*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 *************************************************************************/

Это меняет некоторые элементы таблицы, но я не совсем понимаю, как это работает. Любая помощь от более опытных пользователей будет высоко ценится!

Вот моя песочница: http://kdtnc.snwpe.servertrust.com/cybex-750T-legacy-treadmill-p/cyb-750t.htm

Спасибо!

Answer 1

Ваш код CSS отключен, поэтому он не работает. Кроме того, вам не хватает javascript для обработки события onclick.