I have a custom accordion script - http://jsfiddle.net/nJpNb/2/

What I want to be able to do is hide the prev/next div when $(".more") is clicked. Currently all panels stay open, so the script mostly works.

Any help here would be appreciated.

Thanks

• jquery
• jquery-ui-accordion

Just add

$(".newsBody").hide();
$('.newsTeaser').show();

to first lines of $(".more").click(function() {

DEMO: http://jsfiddle.net/nJpNb/5/

But please cache the items.

Try adding below 2 lines inside your .more click like below,

//hide all others and show newsTeaser
$newsItem.find('.newsBody').hide();
$newsItem.find('.newsTeaser').show();

DEMO

Complete Code:

$(".newsBody").hide();
var $newsItem = $('.newsItem');
$(".more").click(function() {

    //hide all others and show newsTeaser
    $newsItem.find('.newsBody').hide();
    $newsItem.find('.newsTeaser').show();

    var $parent = $(this).parent();
    $parent.hide();
    $parent.parent().find(".newsBody").show();
});
$(".less").click(function() {
     var $parent = $(this).parent();
    $parent.hide();
    $parent.parent().find(".newsTeaser").show();

});

Set an id to each section (so they have a class and id). Then when someone select section 2 then automatically hide section1 and 3