CODEWITHSUNDEEP
jquerycssasp.net-mvc-4visual-studio-2013
Wim ten Brink
Wim ten Brink

Reputation: 26692

Collapse and expand a list

<dl class="">
    <dt class="foo-dt">@Html.ActionLink("foo-label", "Foo", "Bar")</dt>
    @foreach (var foo in FooBar.Items)
    {
        <dd class="foo-dd">@Html.ActionLink(@foo.Naam, @foo.Index, "Bar")</dd>
    }
    ... More of similar dt/dd collections.
</dl>

This is for a sidebar menu and I have to use these specific tags. (Boss ordered this.)

The above HTML generates a list of links with multiple bold header links followed by regular item links. Clicking the header displays the items inside a grid. Clicking the item shows details of the specific item. The site has been set up like this and I need to keep it so.

But I was asked if I can make the header collapse the items below it and only let it expand when the user clicks on the link. It would then display a grid in the main window plus the items as options in the sidebar.

When the user clicks another header, the current header must collapse again and the other grid needs to be displayed with the items in the sidebar. So basically, the sidebars will shop all headers and just the items of the selected header.

Could this be done? Sure, but I don't have a clue where to start. Well, okay. The tags will probably have to include an additional class identifying them as collapsible items, with an additional CSS style and some JavaScript or JQuery script. But since most examples on the internet are collapsible div tags and not dl/dt/dd tags, I'm missing a good example.

Does anyone have a good example to make this all work?

Upvotes: 0

Views: 223

Answers (1)

Alex Robert
Alex Robert

Reputation: 103

$('dt.foo-class').each(function(){
$(this).click(function(){
 $('dd.foo-class').show("slow");
});
});

in this you replace foo-dt with the headers class.. diferent for each header but it has to be the same with dd ex:if header is foo-dt then list is foo-dd.

for the changein beetween the headers use this:

prevHeader ="";
$('dt.foo-class').each(function(){
$(this).click(function(){
if(prevHeader == ""){
prevHeader = "dd"+$(this).attr("class");
}else{
if(prevHeader != $(this).attr("class");){
$("dd"+prevheader).hide('slow');}
}
 $('dd.foo-class').show("slow");
prevHeader = $(this).attr("class");
});
});

Upvotes: 1

Related Questions