there is a block script that opens and closes, you need to make it initially closed but only the page will load immediately the block opens

function close(input) { } $(function() { $("#closea").click(function() { if ($(this).hasClass("closea")) { $(this).removeClass("closea"); $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png"); } else { $(this).addClass("closea"); $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"); } $("#closediv").slideToggle("slow"); }); }); 
 .close{ text-align: ; position: fixed; bottom: 0px; right: 0px; width: 40%; background: rgb(80, 80, 80); } .close:hover{ } #closediv{ } #closediv:hover{ } #closea{ background: rgba(80, 80, 80, 0.7) !important; cursor: pointer; text-align: center; display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='close'> <div> <a id='closea' onclick="close(this)" class="closea"> <img id='closeimg' src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" style="width:30px"> </a> </div> <div id='closediv'> content content content content content content content content content content content content content content </div> </div>

  • one
    $ (document) .ready (function () {}) - the script will be executed when the page is loaded - Dmitriy Kondratiuk
  • @DmitriyKondratiuk can help? I did as you said, but the block closes on my page loading - BedOmar

1 answer 1

 $(function() { $(document).ready(function(){ $("#closea").click(); // ΠΈΠΌΠ΅Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° Π±ΠΎΠΊ $("#closediv").fadeIn(); // ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π±Π»ΠΎΠΊ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ }); }); $(function() { $("#closea").click(function() { if ($(this).hasClass("closea")) { $(this).removeClass("closea"); $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png"); } else { $(this).addClass("closea"); $("#closeimg").attr("src", "https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"); } $("#closediv").slideToggle("slow"); }); }); 
 .close{ text-align: ; position: fixed; bottom: 0px; right: 0px; width: 40%; background: rgb(80, 80, 80); } #closea{ background: rgba(80, 80, 80, 0.7) !important; cursor: pointer; text-align: center; display: block; } #closediv { display: none; /* Π΄Π΅Π»Π°Π΅ΠΌ Π±Π»ΠΎΠΊ с ΠΊΠΎΠ½Ρ‚Π΅Ρ‚Π½ΠΎΠΌ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ */ } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='close'> <div> <a id='closea' onclick="close(this)" > <img id='closeimg' src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png" style="width:30px"> </a> </div> <div id='closediv'> content content content content content content content content content content content content content content </div> </div>