Hello! How to change the name of the button when it is pressed, for example, 'Open' was changed to 'Close'.

$('.text__footer').on('click', '#btm', function(){ $(this).parents().siblings(); $(this).parents().toggleClass('hfooter', ); $(this).parents('.text-footer__about').find('p').slideToggle(1000); }); 
 .text__footer { height: 175px; border: 2px solid #F8F8F8; background-color: #fff; width: 370px; background-color: #FBFAF8; text-align: left; position: relative; transition: 2s; } .text-footer__about h6 { color: #555; } .text-footer__about span { color: #8c8c8c; } .hfooter { height: 300px; } #btm { display:block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="text__footer"> <div class="text-footer__about"> <h6>Lorem ipsum dolor sit amet</h6> <span>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</span> <p style="display: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis deserunt quia voluptatibus rerum vero voluptate recusandae, assumenda eos voluptates odio, asperiores magnam aut commodi alias, quibusdam consectetur. Vitae earum, nisi.</p> <button id="btm">Open</button> </div> </div>

    2 answers 2

     $('.text__footer').on('click', '#btm', function() { $(this).parents().siblings(); //$(this).parents().toggleClass('hfooter', ); $(this).parents('.text-footer__about').find('p').slideToggle(1000); $(this).text(function(i, text) { return text === "Open" ? "Close" : "Open"; }); }); 
     .text__footer { height: 175px; border: 2px solid #F8F8F8; background-color: #fff; width: 370px; background-color: #FBFAF8; text-align: left; position: relative; transition: 2s; } .text-footer__about h6 { color: #555; } .text-footer__about span { color: #8c8c8c; } .hfooter { height: 300px; } #btm { display: block; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="text__footer"> <div class="text-footer__about"> <h6>Lorem ipsum dolor sit amet</h6> <span>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</span> <p style="display: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis deserunt quia voluptatibus rerum vero voluptate recusandae, assumenda eos voluptates odio, asperiores magnam aut commodi alias, quibusdam consectetur. Vitae earum, nisi.</p> <button id="btm">Open</button> </div> </div>

    • Thank you very much! - Alex

     var isOpen = true; $('.text__footer').on('click', '#btm', function(){ $(this).parents().siblings(); $(this).parents().toggleClass('hfooter', ); $(this).parents('.text-footer__about').find('p').slideToggle(1000); if(isOpen){ $(this).text('Close'); isOpen = false; }else{ $(this).text('Open'); isOpen = true; } }); 
     .text__footer { height: 175px; border: 2px solid #F8F8F8; background-color: #fff; width: 370px; background-color: #FBFAF8; text-align: left; position: relative; transition: 2s; } .text-footer__about h6 { color: #555; } .text-footer__about span { color: #8c8c8c; } .hfooter { height: 300px; } #btm { display:block; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="text__footer"> <div class="text-footer__about"> <h6>Lorem ipsum dolor sit amet</h6> <span>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.</span> <p style="display: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis deserunt quia voluptatibus rerum vero voluptate recusandae, assumenda eos voluptates odio, asperiores magnam aut commodi alias, quibusdam consectetur. Vitae earum, nisi.</p> <button id="btm">Open</button> </div> </div>