无法切换效果Magento list.html

我想在Magento中的list.html上创建一个切换效果，在这里我可以单击产品名称并从右向左切换产品信息（图像、立即购买等），但不知怎的，我无法让它工作

以下是我当前的现场演示：

我的代码：

<?php
/**
* Product list template
*
* @see Mage_Catalog_Block_Product_List
*/
?>

<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>


<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php echo $this->getToolbarHtml() ?>
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<?php $_iterator = 0; ?>




<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item<?php if( ++$_iterator == sizeof($_productCollection) ): ?> last<?php endif; ?>">


<a class="productDiv-link" href="#"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></a>

<?php /** THE PRODUCT ID **/ ?>
<?php echo $_helper->productAttribute($_product, $_product->getId()); ?>


<div id="productDiv">
<a class="productDiv-link" href="#">images-link</a>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<?php if($_product->isSaleable()): ?>
<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $_productNameStripped ?>" class="link-learn"><?php echo $this->__('Learn More') ?></a>
</div>
</li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
<?php endif; ?>


<script>
$(document).ready(function () {
$('.hidden').hide()
});
$('.soundDiv-link').click(function () {
$('#soundDiv').slideToggle("slow")
});
$('.videoDiv-link').click(function () {
$('#videoDiv').next().animate({
width: 'toggle'
}, "slow")
});
$('.productDiv-link').click(function () {
$('#productDiv').animate({
width: 'toggle'
}, "slow")
});
</script>

请您确保您编写代码的页面上没有javascript错误，如果有，请告诉我。我认为您需要使用
jQuery.noConflict（）和jQuery，而不是javascript代码中的
$

希望这有帮助。谢谢

萨姆
谢谢。jQuery.noConflict（）；主题（基于引导）应使用[Error]TypeError:undefined不是函数（计算“$（document）.ready（函数（）{$（'.hidden'）.hide（）}）”全局代码（列表，第413行）