I have the following structure:

<li id="0" class="instruction">
        <div class="row1">
            title
        </div>
        <div class="row2 details hidden">
            details
        </div>
    </li>

css for hidden is: display: none

I'd like when user clicked the instruction, then show the details div.

$(document).ready(function () {
        $(".instruction").click(function(e){

            $(e).find('.details').removeClass("hidden");


        });
    });

Tried to implement something like above, but doesn't work. any idea?

I have the following structure:

<li id="0" class="instruction">
        <div class="row1">
            title
        </div>
        <div class="row2 details hidden">
            details
        </div>
    </li>

css for hidden is: display: none

I'd like when user clicked the instruction, then show the details div.

$(document).ready(function () {
        $(".instruction").click(function(e){

            $(e).find('.details').removeClass("hidden");


        });
    });

Tried to implement something like above, but doesn't work. any idea?

• javascript
• jquery

• 1 instead of e , use this, like this $(this).find('.details').removeClass("hidden"); – Amit Soni Commented May 4, 2014 at 14:11

3 Answers 3

Off-answer, but ref for Googlers - vanilla Javascript option for finding a class and removing a class

// Finding all elements of a class (creates an array of results)
let x = document.getElementsByClassName("today");

// If it exists, remove it.
if(x.length > 0) { x[0].classList.remove("today"); }

You have written '.instructionRow' but as per the html it should be '.instruction'. And use $(this) to refer to the element that is clicked. And usage of 'on' (https://api.jquery.com/on/) is better...

$(document).ready(function () {
    $(".instruction").on('click', function(e){
        $(this).find('.details').removeClass("hidden");
    });
});

$(document).ready(function () {
    $(".instructionRow").click(function(){

        $(this).find('.details').removeClass("hidden");


    });
});