CODEWITHSUNDEEP
jqueryhtml
Sven van den Boogaart
Sven van den Boogaart

Reputation: 12317

Show hide divs with the same name

i have a menu wich is like this:

brand 1

Brand 2

the brand is in a div called catmerk under that div is an other div with the series called divserie

so all thedivs with brands have the same name
is it possible with jquery if i click brandname 1 that everything in div catserie under the brand div toggles.
so everything is closed in the beginning if i click a brandname it show the series with that brand so not all series of all brands.
i hope you can understand my weak english. 

<div id="categorie"><!-- een lijst met categorien -->    
    <div id="catmerk"><a href="#">Brand 1</a><br></div>  
    <div id="catserie">  Serienam1<br>
        Seriename2
        seriename 3
        seriename 4
    </div>
    <div id="catmerk"><a href="#">Brand 2</a><br></div>
    <div id="catserie">  Serienam1<br>
        Seriename2
        seriename 3
        seriename 4
    </div> 
</div>

Upvotes: 0

Views: 1101

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

Short and dirty with what you have

$(function(){
    $('div#catserie').hide();

    $('#categorie').on('click', '#catmerk', function(){
        $('div#catserie').hide();
        $(this).next().show();
    });
})

Demo: Fiddle

Upvotes: 0

Bertrand
Bertrand

Reputation: 388

Fisrt there is a code issue in your html. ID must be unique whereas class could be repeated:

Your html for categories should be:

<div id="categorie">

<!-- een lijst met categorien -->
    <div class="catmerk">
        <a href="merk.php?id=26">Bette</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=24"> Bowl</a><br>
        <a href="serie.php?id=25">Aqua</a><br>
        <a href="serie.php?id=46"> Home</a><br>
        <a href="serie.php?id=62"> K.forty</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=5">Bruynzeel</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=9"> Faro</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=27">Burgbad</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=27"> Bel</a><br>
        <a href="serie.php?id=58"> Crono</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=19">Cleopatra</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=11"> Premium Line</a><br>
    </div>
    <div class="catmerk">
        <a href="merk.php?id=28">Clou</a><br>
    </div>
    <div class="catserie">
        <a href="serie.php?id=26"> First</a><br>
    </div>

Now on the javascript part, here is an example, it is not exactly what you want to achieve, but at least it gives an idea of the approach:

$(document).ready(function() {
  // here the id
  $("#catserie").on("click", function(event){
    // add here any action you need.

     all div here will hide    
     $("#categorie div").hide();

     // here all elements with class .catserie will show
     $(".catserie").show();

  });
});

One way is to add another class, for example hide. Having more class on your categories would help

Bette

so you can use the selector ".category" in jQuery like $(".category") select all your categories.

you can add also a class for "filtered", and one to hide the content "hidden" by jQuery

active content:

<div class="category catserie filtered">

hidden content

<div class="category catmerk hidden">

Upvotes: 2

SteveP
SteveP

Reputation: 19093

It looks like you want to show/hide categories when clicking on them. You can do this with jqueryui accordion as follows:

$("#categorie").accordion();

e.g. http://jsfiddle.net/y6Rj8/

Note, I had to incldue jquery, jqueryui, and I also had to adjust the css to set the width of categorie div.

Upvotes: 0

Related Questions