[Solved] jQuery fade elements on click [closed]

by


Ok I think I understood what you want.

Your error comes from your strange callback function, where you define another callback function (you actually create a loop).

Here is a corrected one, that should do the trick (see snippet)

$(document).ready(function (e) {
    $("#menu").accordion({
        collapsible: true,
        active: false
    });

    $("#stuff_header").click(function (e) {
        // check if stuff_header_1 is visible or not, and do the wanted transition
        if ($("#stuff_header_1").is(':visible')) { 
            $("#stuff_header_1").fadeOut("slow");
        } else {
            $("#stuff_header_1").fadeIn("slow");
        }

        if ($("#stuff_header_2").is(':visible')) {
            $("#stuff_header_2").fadeOut("slow");
        } else {
            $("#stuff_header_2").fadeIn("slow");
        }
    });


});
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="menu">
    
<h4 id="stuff_header">stuff</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
    
<h4 id="stuff_header_1">more stuff</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
    
<h4 id="stuff_header_2">JavaScript</h4>

    <ul id="ul_header">
        <li>stuff1</li>
        <li>stuff2</li>
        <li>stuff3</li>
        <li>stuff4</li>
        <li>stuff5</li>
        <li>stuff6</li>
    </ul>
</div>

Note : I feel there should be a proper way to code that

0

solved jQuery fade elements on click [closed]