Javascript 隐藏/显示Div-Wordpress类别页面

我已经找了3个多小时试图解决这个问题，所以如果你认为这个问题已经得到了回答，我很抱歉

我完全知道如何将show/hide div添加到页面中，但我很难将其添加到WP中的类别页面中

我的网站：

我需要的是能够有一个DIV在每个类别下，可以显示当一个按钮被选中。目前，当我选择切换时，它会隐藏，然后显示页面上的所有div

有更多的信息

看这里

$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（“.panel”）.slideToggle（“”）；
});
});

html

分区小组{
边缘顶部：10px；
左边距：0px；
边缘底部：120px；
填充：0px；
背景：#fff；
边框：实心1px#fff；
}
p、 翻转{
边际上限：0px；
左边距：540px；
边缘底部：0px；
填充：0px；
边缘顶部：-32px；
背景：#fff；
边框：实心1px#fff；
}
分区小组{
寡妇：50%；
高度：60px；
显示：无；
}

您的目标是所有具有“flip”类的div。您可以通过添加

this

来解决此问题，以指定您只对单击的元素感兴趣：

$(document).ready(function() {
    $(".flip").click(function() {
        var target= $(this).next(".panel");
        $(target).toggle();
    });
});

下面是一个例子（很抱歉，它不好看）。

<style type="text/css">
div.panel {
margin-top:10px;
margin-left:0px;
margin-bottom:120px;
padding: 0px;
background: #fff;
border: solid 1px #fff;
}
p.flip {

    margin-top:0px;
margin-left:540px;
margin-bottom:0px;
padding: 0px;
margin-top:-32px;
background: #fff;
border: solid 1px #fff;


}

div.panel {
widht: 50%;
height: 60px;
display: none;
 }
 </style>



<p class="flip"><img src="http://www.ticketyoda.co.uk/wp-content/uploads/2013/03/ticketview.png" /></p>

$(document).ready(function() {
    $(".flip").click(function() {
        var target= $(this).next(".panel");
        $(target).toggle();
    });
});