Hide div with special class contain in another div

[mano7859]

Hi :)

I don' know how to hide some div with special class.

This is my html code:

<div id="subMain">
    <div id="archivesResult_Content">
        <div id="box">
        <div id="categorie" cat="2">
            ...
        </div>
        </div>
        <div id="box">
            <div id="categorie" cat="14">
                ...
            </div>
            <div id="categorie" cat="5">
                ...
            </div>
            <div id="categorie" cat="14">
                ...
            </div>
        </div>
        <div id="box">
            <div id="categorie" cat="13">
                ...
            </div>
        </div>
    </div>
</div>

This is my jquery code:

$(function(){
    $('ul#groupCat li').click(function(){

        var catChoice=$(this).attr('cat');

        if(catChoice == "00"){
                    $("#subMain  #archivesResult_Content #box #categorie").slideDown();
                    return;
        }

        var i=0;

        $("#subMain  #archivesResult_Content #box #categorie").each(function(){

            if($(this).attr("cat") != catChoice){      

                $(this).slideUp();

            }else{

                i++;
                $(this).slideDown();

            }

        });

   });

});

The problem is:
For example, if an user clicks on cat '14', all div different of '14' will disappear but not the box associated. In this example, the box with '<div id="categorie" cat="2">' will still display without '<div id="categorie" cat="2">'. That i would like that this box with the '<div id="categorie" cat="2">' disappear.

I hope i was clear ;)

Thanks a lot for your help :)

[AleMonteiro]

First of all, you shoudln't have multiple elements with the same ID. ID selectors only return the first element. So, use class instead of id in this case: <div class="categorie">

Then you should use the attribute selector of jQuery for selectiong an element with an specific cat attribute. Like this: $("#subMain).find("div.categorie[cat=2]")

[mano7859]

Hi AleMonteiro and thank you for your answer, :))

Sorry to answer you late but i take another path. :/

I did a new jquery function, it works half.

For example, if i select '14', all <div id="categorie" cat="14"> will be displayed and the box associated will be displayed and the other div without "cat 14" will not be displayed.

The problem is if i select '5', the <div id="categorie" cat="5"> and the box associated will not be display.

I'm explaining more, in this code:

<div id="box">
    <div id="categorie" cat="14" catsort="Yes">
        ...
    </div>
    <div id="categorie" cat="5" catsort="No">
        ...
    </div>
    <div id="categorie" cat="14" catsort="Yes">
        ...
    </div>
</div>

Here my jquery function doesn't display the first '<div id="categorie" cat="14" catsort="Yes"></div>' only the last div

Perhaps an idea?

Thanks a lot for your help :)

This is my new jquery function:

$(function(){

    $('ul#groupCat li').click(function(){

        var catChoice=$(this).attr('cat');

        if(catChoice == "00"){
                $("#subMain  #archivesResult_Content #box").slideDown();
                $("#subMain  #archivesResult_Content #box #categorie").slideDown();
                $("#subMain  #archivesResult_Content #box #categorie").removeAttr('catsort');
                return;
        }


        var i=0;

        $("#subMain  #archivesResult_Content #box #categorie").each(function(){

            if($(this).attr("cat") != catChoice){      

                $(this).slideUp();
                $(this).attr('catsort','No');

            }else{

                i++;
                $(this).slideDown();
                $(this).attr('catsort','Yes');
            }

            var catSortAttr=$(this).attr('catsort');;

            if(catSortAttr=="Yes"){
                $(this).parent().slideDown();
            }else{
                $(this).parent().slideUp();
            }

        });

   });

});

[AleMonteiro]

You didn't correct the issues that I told you.

[mano7859]

Shame on me ! Sorry...

Even if i did I got the same problem. :(

You said me:

Like this: $("#subMain).find("div.categorie[cat=2]")

The problem is that cat=X is dynamic (php). It changes between categories.

An idea, please ?!

This is my Html code:

  <div id="subMain">
        <div id="archivesResult_Content">
            <div class="box">
            <div class="categorie" cat="2">
                ...
            </div>
            </div>
            <div class="box">
                <div class="categorie" cat="14">
                    ...
                </div>
                <div class="categorie" cat="5">
                    ...
                </div>
                <div class="categorie" cat="14">
                    ...
                </div>
            </div>
            <div class="box">
                <div class="categorie" cat="13">
                    ...
                </div>
            </div>
        </div>
    </div>

And my jquery script modified:

$(function(){


    $('ul#groupCat li').click(function(){

        var catChoice=$(this).attr('cat');


        if(catChoice == "00"){
                $("#subMain  #archivesResult_Content .box").slideDown();
                $("#subMain  #archivesResult_Content .box .categorie").slideDown();
                $("#subMain  #archivesResult_Content .box .categorie").removeAttr('catsort');
                return;
        }
        var i=0;


        $("#subMain #archivesResult_Content .box .categorie").each(function(){

                if($(this).attr("cat") != catChoice){      


                $(this).slideUp();
                $(this).attr('catsort','No');


                }else{


                i++;
                $(this).slideDown();
                $(this).attr('catsort','Yes');

                }



            var catSortAttr=$(this).attr('catsort');;



            if(catSortAttr=="Yes"){
                $(this).parent().slideDown();
            }else{
                $(this).parent().slideUp();
            }
        });




    }); 


});

[AleMonteiro]

Try something like this(not tested):

$(function(){

    $('ul#groupCat li').click(function(){

        var 
            catChoice= $(this).attr('cat'),
            $subMain = $("#subMain");

        if(catChoice == "00"){
            $subMain.find("div.box").slideDown();
            $subMain.find("div.categorie").slideDown().removeAttr('catsort');
            return;
        }

        $subMain
            .find('div.categorie[cat!="' + catChoice + '"]') // div categorie who is not the catChoice
                .slideUp();

        $subMain
            .find("div.categorie[cat=" + catChoice + "]") // div categorie who is the catChoice
                .attr('catsort', 'Yes') 
                .slideDown() 
            .parent() // box who has the catChoice categorie
                .slideDown()
            .siblings("div.box") // other boxes
                .slideUp();
    }); 

});

[mano7859]

Thanks for your answer.

Your code is pure better than mine ;)

But it doesn't work. :(

I'm explaining:

If we have this html code:

<div id="subMain">
    <div id="archivesResult_Content">
        <div id="archivesResult_title">
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="14">
            <div class="categorie" cat="13">
        </div>
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="3">
            <div class="categorie" cat="13">
        </div>
    </div>
</div>

If we choose 'cat 14' is perfect all the other div don't display
If we choose 'cat 3' is perfect all the other div don't display
But if we choose 'cat 13' all div disappear

An idea ?!

[AleMonteiro]

See if this works:

$(function(){

    $('ul#groupCat li').click(function(){

        var 
            catChoice= $(this).attr('cat'),
            $subMain = $("#subMain");

        if(catChoice == "00"){
            $subMain.find("div.box").slideDown();
            $subMain.find("div.categorie").slideDown().removeAttr('catsort');
            return;
        }

        $subMain
            .find('div.categorie[cat!="' + catChoice + '"]') // div categorie who is not the catChoice
                .slideUp();

        $subMain
            .find("div.categorie[cat=" + catChoice + "]") // div categorie who is the catChoice
                .attr('catsort', 'Yes') 
                .slideDown() 
            .parent() // box who has the catChoice categorie
                .slideDown();

        $subMain
            .find('div.box:not(:has(div.categorie[cat="' + catChoice + '"]))') // Only boxes that does not have the categorie
                .slideUp();
    }); 

});

[mano7859]

HI AleMonteiro,

I've tested before answering you...

Thanks a lots it works very nice. Honestly, I could never find this code. You were very patient with me. thanks again.

With your help, i've learned more with Jquery.
You're genius !! :D

Thanks again :D

[AleMonteiro]

You are welcome.
Good luck with your learning.
Seeya