Question

I tried to make an accordion effect with JavaScript based off this video altering a few things like using an input button instead of a link for the selector. However for some reason it’s not working. Firefox error console outputs unknown pseudo-class or pseudo-element "visible" every time I try to use it. What’s the problem?

$("div.example").hide();
$("input.exampleButton").click(function(){
    $("div.example:visible").slideUp("slow");
    $(this).parent().next().slideDown("slow");
    //return false; if you don't want the link to follow
});

Here is the HTML

input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>
input type="button" value="See An Example" class="exampleButton" />
<div class="example">
    ...content
</div>

Answer 1

You can ignore the warning in the console. The reason the code is not working is that the markup structure doesn’t match the traversal done by the Javascript. Each <input> should probably be inside a <div>, so that the call to parent().next() will correctly go from the input to the <div class="example"> following it. You’re also missing the opening < on the inputs but I assume that’s a copy/paste error.

Working markup:

<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>
<div>
    <input type="button" value="See An Example" class="exampleButton" />
</div>
<div class="example">
    ...content
</div>