Jquery open and close within a parent div

Question

The title does not explain that well, essentially I have 8 divs the same, with the same class for css styling.

They all have hidden content, I want to be able to only expand one div at a time without using different classes or identifiers for each div and hidden content.

I have tried to display this on Jsfidle using two divs the same , however I can't even get it to fire on jsfiddle for some reason

http://jsfiddle.net/dAXJ2/8/

$(document).on('click',".servicereadmore",function() {
    //var x = $(this).closest('div').attr('class') 
    //$('.hiddenservices').parent(x).slideDown(1000);    
    $('.hiddenservices').slideDown(1000);
    $(this).html("Read less");
    $(this).removeClass("servicereadmore");
    $(this).addClass("servicereadless");
});

$(document).on('click', ".servicereadless" ,function() {
    $('.hiddenservices').slideUp(1000);
    $(this).html("Read more");
    $(this).removeClass("servicereadless");
    $(this).addClass("servicereadmore");
});

That currently works above but opens all the hidden text as stated, the comments are were I have been trying to only expand within the parent div of the button I pressed

Answer 1

Your clickable <a> tags should probably be buttons, since that's the role they're in. Also, your functions aren't working currently because you've added

return false;

as the first statement of each one. That prevents any of the code after that from ever running. Instead of that, either change those <a> links to <button type=button> or else add a parameter to the handlers ("e" or "event") and call

e.preventDefault();

in the handler.

To affect only the portion of the page relevant to the "Read More" links, you just need to navigate the DOM:

$(this).closest('.myinfo').find('.hiddenservices').slideDown(1000);

That means: "staring from the clicked element, climb up the DOM to find the closest element with class 'myinfo', and then from that point down find all the elements with class 'hiddenservices' and slide them down."

A couple of other problems: you'll need to start the "hiddenservices" sections off as hidden, or otherwise not visible somehow. Also, another issue with your jsfiddle was that you didn't have jQuery selected. That's something you could quickly learn just by checking the error console.

Here is a repaired jsfiddle.

Answer 2

You dont have to use that much of code for this purpose. USe simply like

$(document).on('click', ".servicereadmore", function (e) {
    e.preventDefault();
    if ($(this).parent().find('.hiddenservices').is(":visible")) {
        $(this).html("Read more");
    } else {
        $(this).html("Read less");
    }
    $(this).parent().find('.hiddenservices').slideToggle(1000);
});

Instead of adding and removing the class name, you can just use slideToggle() .

Demo