Swapping divs on click

[TechBoyJK]

Hi Guys, I'm trying to create a category list.

One first load, the category list is going to be a short list of the top 5 major categories. Each major category will have a sublist of 3 subcategories below it. Lastly, there will be a link labeled 'more' that when clicked, will toggle out divs and display a full category list. Lastly, all other primary categories will have their short list hidden as well, so you only see

the Primary Category followed by a 'more' link.

Here's a crude example of what I mean. First block is 'first load'. Then the next block would be how it'd look if I clicked the "more" link below vehicles

--------------------------------
Vehicles
-Cars
-Trucks
-Motorcycles
MORE

Stuff
-Musical Instruments
-Camping
-clothing
MORE

Electronics
-televisions
-stereos
-video games
MORE

------------------------------
ex.

Vehicles
-Cars
-Trucks
-Motorcycles
-Boats
-Tractors
-antiques
-commercial
Less

Stuff
MORE

Electronics
MORE

------------------------------

I think every primary category (ie vehicles) will require 3 divs.

Div1 - short list with 3 sub categories
Div2 - full list of all subcategories
Div3 - hidden list

At first load, the DIV1 variant will be displayed for all primary categories.

When the 'more' link is clicked for a particular primary category, it will swap it's div1 for it's div2, and at the same time, swap all other categories div1 for their div3.

If the 'less' link is clicked on div3, everything would revert back to normal, all primary categories showing div1. I need to find/write some javascript which would toggle the div's.

Does this make sense? Am I going about this the right way? I'd think the code would look something like the following, with each Primary category being cat1, cat2, cat3, etc.


Code for first Primary Category

-------------------------------------------------------

<div id="cat1div1">

sample text

<a href="javascript:toggle2('cat1div1','cat1div2');javascript:toggle2('cat2div1','cat2div3');javascript:toggle2('cat3div1','cat3div3');">
more
</a>

</div>



<div id="cat1div2">

a whole bunch of sample text

<a href="javascript:toggle2('cat1div2','cat1div1');javascript:toggle2('cat2div3','cat2div1');javascript:toggle2('cat3div3','cat3div1');">less</a>

</div>


<div id="cat1div3">
<a href="javascript:toggle2('cat1div3','cat1div2');">MORE</a>

</div>

 

[BigDH01]

Hi Guys, I'm trying to create a category list.

One first load, the category list is going to be a short list of the top 5 major categories. Each major category will have a sublist of 3 subcategories below it. Lastly, there will be a link labeled 'more' that when clicked, will toggle out divs and display a full category list. Lastly, all other primary categories will have their short list hidden as well, so you only see

the Primary Category followed by a 'more' link.

Here's a crude example of what I mean. First block is 'first load'. Then the next block would be how it'd look if I clicked the "more" link below vehicles

--------------------------------
Vehicles
-Cars
-Trucks
-Motorcycles
MORE

Stuff
-Musical Instruments
-Camping
-clothing
MORE

Electronics
-televisions
-stereos
-video games
MORE

------------------------------
ex.

Vehicles
-Cars
-Trucks
-Motorcycles
-Boats
-Tractors
-antiques
-commercial
Less

Stuff
MORE

Electronics
MORE

------------------------------

I think every primary category (ie vehicles) will require 3 divs.

Div1 - short list with 3 sub categories
Div2 - full list of all subcategories
Div3 - hidden list

At first load, the DIV1 variant will be displayed for all primary categories.

When the 'more' link is clicked for a particular primary category, it will swap it's div1 for it's div2, and at the same time, swap all other categories div1 for their div3.

If the 'less' link is clicked on div3, everything would revert back to normal, all primary categories showing div1. I need to find/write some javascript which would toggle the div's.

Does this make sense? Am I going about this the right way? I'd think the code would look something like the following, with each Primary category being cat1, cat2, cat3, etc.


Code for first Primary Category

-------------------------------------------------------

<div id="cat1div1">

sample text

<a href="javascript:toggle2('cat1div1','cat1div2');javascript:toggle2('cat2div1','cat2div3');javascript:toggle2('cat3div1','cat3div3');">
more
</a>

</div>



<div id="cat1div2">

a whole bunch of sample text

<a href="javascript:toggle2('cat1div2','cat1div1');javascript:toggle2('cat2div3','cat2div1');javascript:toggle2('cat3div3','cat3div1');">less</a>

</div>


<div id="cat1div3">
<a href="javascript:toggle2('cat1div3','cat1div2');">MORE</a>

</div>

I would just use <ul>s for this with jquery. Something like:

$('#parentlist li').each(function (n) {
if (n < variable) {
$(this).css("display", "list-item");
} else {
$(this).css("display", "none");
}
});

and then outside of this function define variable... either 3, the length of the list, or 0.