Question

see the jsfiddle here

i’m trying to get the ‘read more’ links to slide down and show the hidden content when clicked, but i can’t seem to get the click function registered correctly. did i do something obviously wrong?

basic html layout

<div id="wrapper">
    <div id="aHidden">some long text here</div> <!--defaulted hidden with css-->
    <div id="aBtn" class="bio-readMore">read more...</div>
</div>

here’s the jQuery i’m trying to use to do this:

$(document).ready(function() {
    $("div").each(function(idx) {
        if ($(this).hasClass('bio-readMore')) {
            var thename = this.id.replace("Btn", "Hidden");
            var sel = "#" + thename;
            $(sel).click(function() {
                alert("running click for element with value " + this.id);
                if ($(this).is(":hidden")) {
                    $(this).slideDown("slow");
                } else {
                    $(this).slideUp();
                }
            });
        }
    });
});​

Answer 1

With your existing markup you could easily replace your click registration with the following:

$(".bio-readMore").on("click", function(){
    $(this).prev().slideToggle();
});

​jsfiddle example

If you want to fix your code you have some of your selectors reversed:

$(document).ready(function() {
    $("div").each(function(idx) {
        if ($(this).hasClass('bio-readMore')) {
            var thename = this.id.replace("Btn", "Hidden");
            var sel = "#" + thename;
            $(this).click(function() {  //<--- On the <a/> not the hidden element
                alert("running click for element with value " + this.id);
                if ($(sel).is(":hidden")) { // <----you want to check the hidden not the <a/>
                    $(sel).slideDown("slow");
                } else {
                    $(sel).slideUp();
                }
            });
        }
    });
});​

jsfiddle example