La page FAQ affiche automatiquement les réponses

Question

J'essaie de créer une page FAQ déroulante avec jQuery et pour une raison quelconque, les réponses s'affichent lorsque je charge la page.

J'ai mon jQuery script sur ma page.

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

Et ma page javascript :

<script src="js/threecatsdesign.js"></script>

Mon javascript complet est le suivant :

$(document).ready(function() {
    $("#categories h3").click(
        function() {
            $(this).toggleClass("minus");
            if ($(this).attr("class") != "minus") {
                $(this).next().hide();
            }
            else {
                $(this).next().show();
            }

            $("#image").attr("src", "");

            // needed for IE so a placeholder isn't displayed for the image
            $("#image").attr("style", "display:none;");     }
    ); // end click
}); // end ready

Mon code HTML est le suivant :

<main id="categories">
        <h3>What is this site about?</h3>
        <div>
            <ul id="web_images">
                <li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
            </ul> 
        </div>
        <h3>If you hold contests on the site, how do I enter?</h3>
        <div>
            <ul id="java_images">
                <li>Go to our page called contests in the nav bar and you will need to fill out the form in order to enter.</li>
            </ul>
        </div><p>
        <h3>I have a tutorial I would like to suggest or put up my own. How do I do that?</h3>
        <div>
            <ul id="net_images">
                <li>Please go fill out our contact form and you will be contaced with 24 hours or less on how to proceed.</li>
            </ul>
        </div>

Answer 1

Vous devez ajouter des css pour masquer les questions au départ.

<style>
    .faq-question div {
        display:none;
    }
</style>

Je suggère de le placer dans un autre fichier, mais les styles en ligne comme celui-ci constituent une solution rapide et pratique.

Vous devez également insérer chaque question et chaque réponse dans une balise comme celle-ci

<div class="faq-question">
    <h3>What is this site about?</h3>
    <div>
        <ul id="web_images">
            <li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
        </ul> 
    </div>
</div>

Et modifiez votre JS pour refléter le changement d'éléments.

$(".faq-question").click(