Cómo ocultar texto conmutable de forma predeterminada con JQuery [duplicado]

Question

Soy nuevo en el uso de Jquery y necesito ocultar un texto de muestra de forma predeterminada. La idea es que un usuario puede hacer clic en una obra como se muestra a continuación y aparecerá una breve descripción de la obra. Al volver a hacer clic en el título de la obra, el texto desaparecería. En este momento, el texto se muestra de forma predeterminada. Necesito que esté oculto para comenzar y solo aparezca cuando se hace clic en el nombre de la obra. El sitio web actualmente tiene este aspecto

Código HTML utilizado:

                            <h3>Tragedies:</h3>
                            <br>
                        </div>
                        
                            <div class="play">
                                <h5 class="rnj">Romeo and Juliet -- Saturday June 4th at 7PM</h5>
                                <p class="rnj"><br>test text</p>
                            </div>

                            <div class="line">
                                <br><hr><br>
                            </div>

                            <div class="play">
                                <h5 class="ham">Hamlet -- Saturday June 11th at 7:30PM</h5>
                                <p class="ham"><br>test text</p>
                            </div>

                            <div class="line">
                                <br><hr><br>
                            </div>

(Eso no es todo, pero creo que transmite el mensaje).

JQuery actualmente en uso:

    $("h5.rnj").click(function() { $("p.rnj").toggle();
        
    });
});

$(document).ready(function() { $("h5.ham").click(function() {
        $("p.ham").toggle();
        
    });
});

Answer 1

Ocultar los párrafos con CSS:

p{
    display: none;
}