Question

I have a div that, when clicked, increases in height, and vice versa. Inside the div is an RSS feed catcher. The problem is that when the Div is expanded, and the links on the RSS feeds are clicked, the Div simply collapses rather than following the link.

Here is the code:

$(document).ready(function(){
$("#divright").toggle(function(){
$("#divright").animate({
height:640,
borderBottomWidth: "0px"},500);
},function(){
$("#divright").animate({
height:45,
borderBottomWidth: "1px"},500);    
});
});

and the link (graphic design news bit)

http://flatpack.site90.com/About%20Flatpack.html

How can i sort it so that I can click the links on the RSS feeds, but also retain the ability to collapse the panel somehow.

Thanks 🙂

Answer 1

If you can, break out your toggler from the expanding area.
I would do it like this

<div class="wrapper">
    <h2 class="toggler">Toggler</h2>
    <ul>
        <li>News</li>
    </ul>
</div>​


$(".wrapper h2.toggler").click(function(){
    var $ul = $(this).next();
    $ul.toggle("slide");
});​

http://jsfiddle.net/wz2Gt/15/