$(function(){ $("button").click(function () { $("div").slideToggle("slow"); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Вуаля!</button><br><br> <div> <b>Правило.</b> Ё должна использоваться: в случаях возможных разночтений; в словарях; в книгах для изучающих русский язык (т. е. детей и иностранцев); для правильного прочтения редких топонимов, названий или фамилий. Во всех остальных случаях наличие буквы ё только затрудняет чтение. Она плохо выглядит, зато хорошо звучит. </div>
How to make the block was initially closed?

    2 answers 2

    Simply add a style to the div block in which to describe the display property, which defines how the element should be shown in the document:

     <div style="display: none;">

    All this can be seen if you look at the source code of your document and see how it changes. Sample your source code before clicking:

    enter image description here

    source code after clicking:

    enter image description here

    From here you can make a simple conclusion about what you are missing in the code.

       $(function(){ $("button").click(function () { $("div").slideToggle("slow"); }); }); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Вуаля!</button><br><br> <div style="display: none;"> <b>Правило.</b> Ё должна использоваться: в случаях возможных разночтений; в словарях; в книгах для изучающих русский язык (т. е. детей и иностранцев); для правильного прочтения редких топонимов, названий или фамилий. Во всех остальных случаях наличие буквы ё только затрудняет чтение. Она плохо выглядит, зато хорошо звучит. </div>