Why does jQuery code not work as it should with slideToggle?

Asked

Viewed 31 times

1

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FAQ | jQuery Essentials</title>
    <script src="jquery-3.4.1.min.js"></script>
    
    <style>
        body {
            padding: 10%;
        }

        .button {
            display: inline-block;
            padding: 10px 15px;
            background: #09f;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 0 #000;
            cursor: pointer;
        }

        .button:hover {
            background: #069;
        }

        .fade {
            display: flex;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
        }

        .fade_box {
            width: 500px;
            background: white;
            max-width: 96%;
            padding: 20px;
            margin: auto;
        }

        .fade_close {
            position: absolute;
            top: 5%;
            right: 5%;
            color: #eee;
            font-size: 2em;
            font-weight: bold;
            cursor: pointer;
        }

        .fade_close:hover {
            color: #bf7676;
        }

        .fade_box p {
            padding: 10px;
            background: #eee;
            cursor: pointer;
            margin: 0;
            color: #777;
        }

        .fade_box p:hover {
            color: black;
        }

        .fade_box p b {
            display: inline-block;
            vertical-align: middle;
            margin-left: 30px;
            opacity: 0.5;
            padding: 2px 7px;
            background: #069;
            color: white;
            font-size: .7em;
            font-weight: bold;
            border-radius: 10%;
        }

        .slide {
            background: #eee;
            margin: 0;
        }

        .slide:first-of-type {
            margin-top: 20px;
        }

        .slide * {
            margin: 0;
        }

        .slide h4 {
            font-size: 0.875em;
            font-weight: 500;
            padding: 20px;
            margin: 0;
            border-bottom: 2px solid #ccc;
            cursor: pointer;
        }

        .slide h4:hover {
            background: #fbfbfb;
        }

        .slide_content {
            background: #000;
            color: white;
            display: none;
            padding: 20px 20px 5px 20px;
        }

        .slide_content p {
            font-size: .8em;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

<span class="expand button">Expanded ALL</span> | <span class="close button">Close All</span> | <span class="toggle button">Toggle All</span>

<div class="slide">
    <h4>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</h4>
    <div class="slide_content">
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
    </div>
</div>

<div class="slide">
    <h4>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</h4>
    <div class="slide_content">
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
    </div>
</div>

<div class="slide">
    <h4>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</h4>
    <div class="slide_content">
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
        <p>Lorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshiLorem iihdshi Lorem iihdshi Lorem iihdshi  Lorem iihdshi</p>
    </div>
</div>

<script>
$(function () {
    const speed = 500;

    $(".expand").on("click", function () {
        $(".slide_content").stop().slideDown(speed, function () {

        });
    });

    $(".close").on("click", function () {
        $(".slide_content").stop().slideUp(speed, function () {

        });
    });

    $(".toggle").on("click", function () {
        $(".slide_content").stop().slideToggle(speed, function () {

        });
    });

    $(".slide h4").on("click", function () {
        // $(this).parent().find(".slide_content").slideToggle(); para n fechar todos automaticamente quando abre um
        $(".slide_content").stop().slideUp(speed);
        $(this).parent().find(".slide_content").slideToggle();
    });

});
</script>
</body>
</html>

I am doubtful in the following section of the Cód jQuery:

 $(".slide h4").on("click", function () {
    // $(this).parent().find(".slide_content").slideToggle(); para n fechar todos automaticamente quando abre um
    $(".slide_content").stop().slideUp(speed);
    $(this).parent().find(".slide_content").slideToggle();
});

This code snippet should make the text box open and close (when you click on the heading H4 of each of the 3 sections), however it only opens, when I click to close it contracts and expands immediately staying always open

jquery
No answers

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.