CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Arryangga Aliev Pratamaputra
Arryangga Aliev Pratamaputra

Reputation: 865

How to show and hide multiple element in one selector jQuery?

i want to show the hidden element with ID hidden_element when i click the element with class show_hidden_element , and close the element with ID hidden_element when i click element with ID close_hidden_element , if i just make one my script can work fine, but i have three element with same CLASS and ID, it cant work, somebody please help.

this is my script

 <article class="post show_hidden_element">
    <div id="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div id="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div id="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

my jQuery Script is

    $(this).find(".show_hidden_element").click( function(){
        $(this).find("#hidden_element").show();
    });
    $(this).find("#close_hidden_element").click( function(){
        $(this).find("#hidden_element").hide();
    });

Upvotes: 0

Views: 4953

Answers (3)

mohkhan
mohkhan

Reputation: 12305

You cannot have same id for multiple elements. You have to convert the id into class for all the id="hidden_element"(and others too) and then use something like this.

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element1" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element2" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a id="close_hidden_element3" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

jquery

$(".show_hidden_element").click( function(){
    $(this).find(".hidden_element").show();
});

$(".button_close").click( function(){
    $(this).closest(".hidden_element").hide();
});

Upvotes: 0

DevlshOne
DevlshOne

Reputation: 8457

Elements on a page must have UNIQUE IDs. If you want this to work, you'll need to change them to classes. Do you want each of the <article>s to hide/show only by their respective triggers?

 <article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element" class="button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

jQuery

$("article").on("click",".show_hidden_element",function(){
    $(this).find(".hidden_element").show();
});
$("article").on("click",".close_hidden_element",function(){
    $(this).closest(".hidden_element").hide();
});

Actually, this doesn't work quite right because of the placement of the show_hidden_element class. You might be better off having the <a close="close_hidden_element" class="button_close">&times;</a> being a toggle, like this:

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                 <h2 class="title">Lorem Ipsum</h2>
 <a class="close_hidden_element" class="button_close">&times;</a>

            </div>
        </div>
    </div>
</article>

$(function () {
    $("article").on("click", ".close_hidden_element", function () {
        $(".hidden_element").toggle();
    });
});

Upvotes: 1

Optimus Prime
Optimus Prime

Reputation: 6907

The difference between id and class is that id is unique, class is not. Also an element may have multiple classes, but unique id.

use class="close_hidden_element button_close".

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

<article class="post show_hidden_element">
    <div class="hidden_element">
        <div class="read_box">
            <div class="read_box_content">
                <h2 class="title">Lorem Ipsum</h2>
                <a class="close_hidden_element button_close">&times;</a>
            </div>
        </div>
    </div>
    <div class="border"></div>
</article>

And your jquery should be.

$(document).on('click', 'div.show_hidden_element',function(){
    $(".hidden_element").show();
});
$(document).on('click', 'div.close_hidden_element',function(){
    $(".hidden_element").hide();
});

Advice: read this http://css-tricks.com/the-difference-between-id-and-class/

Upvotes: 1

Related Questions