Collapse/accordion style for modules in WP

1 Views

I want to modify my page’s right sidebar to work like on www.novaator.ee’s.

A bit of code i got from novaator.ee site:

Read More
    /* accordation menu */
<script type="text/javascript">
function accordMenu(){
    jQuery("#rightMenu .rContent").hide();
    jQuery("#rightMenu .body-lehed").show();

    jQuery('#rightMenu .rHeading').click(function() {
        jQuery('#rightMenu .rContent').slideUp('normal');
        jQuery(this).next().slideDown('normal');
    });

}
</script>

and CSS 

/* Accordation menu */
#rightMenu{
    margin-bottom:11px;
    width:214px;
}
#rightMenu .link{
    font-weight:bold;
    color:#6b6f72;
    text-decoration:none;
    margin-right:10px;
    margin-left:14px;
    font-style:italic; 
    font-size:11px;
    padding-bottom:8px;
}

#rightMenu .link:hover{
    text-decoration:underline;
}
#rightMenu .rHeading,.rHeading2{
    background:#14588f;
    color:#f6f6f6;
    font-weight:bold;
    font-size:15px;
    padding:5px 20px 4px 20px;
    cursor:pointer;
    margin-bottom:2px;
    height:18px;
}
#rightMenu .rHeading:hover,.rHeading2:hover{
    text-decoration:underline;
    color:#ffffff;
}
#rightMenu .cat-video2010,#rightMenu .cat-video2010 a,
#rightMenu .cat-video2011,#rightMenu .cat-video2011 a,
#rightMenu .cat-video,#rightMenu .cat-video a{
    background:#ef9d37;
    color:#f6f6f6;
    text-decoration:none;
}

#rightMenu .rContent{
    border:1px solid #dddddd;
    border-top:0;
    margin-top:-2px;
    padding-left:6px;
    padding-top:11px;


}
#rightMenu .question{
    border-left: 5px solid #f6b439;
    padding: 2px 5px 2px 9px;
    line-height:16px;
}
#rightMenu .asnwerer{
    font-size:13px;
    font-weight:bold;
    color:#c5c5c5;
    padding-left:14px;
    margin-top:4px;
    margin-bottom:-5px;
}
#rightMenu .asnwer{
    padding-left:14px;
    line-height:16px;
}

My question is , where should i add these pieces of code (to style.css and to … ) ?
What sort of other modifications might i have to do?

Keeping in mind that on my site the right sidebar is for modules(so the javascript should work for modules) and right now theres two woocommerce modules running.

I think i need to change the script a bit too , to function with fresh-lite theme.Since im no at home with javascript , i was hoping for someones further assistance.

What i’ve done so far , is that i’ve added css part of it to style.css and tryed to add script part to functions.php , but after done so , it will load blank pages(which ever URL i use).So i guess i have to use something like childtheme… ?

To be more accurate , i need all widgets(not modules) to work the same way.Accordions root should be the title of widget and it should work on click not on hover.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. As it is, you need to include that script after the HTML it applies to. So look for a footer template or other location low in the page.

    If you modified it slightly, like so, you can put it anywhere in the templates. 

    <script type="text/javascript">
jQuery(function() { // wait for the DOM to finish loading
    function accordMenu(){
        jQuery("#rightMenu .rContent").hide();
        jQuery("#rightMenu .body-lehed").show();

        jQuery('#rightMenu .rHeading').click(function() {
            jQuery('#rightMenu .rContent').slideUp('normal');
            jQuery(this).next().slideDown('normal');
        });
    }
});
</script>

    All this assumes that the ID and class values that are in your CSS are also in place in your HTML.