onclick toggle divs, change text on button

click, toogle divs, move text below divs up and down

by akmiecik

HTML

<button class="switch_button_3">to Extended Vigil</button>
<div id="parent">
<div class="pentecost_vigil_mass"><h2>Pentecost Sunday                                                       <br>                     At the Vigil Mass                                                 </h2><p>Lectionary: 62</p><div class="wr-block b-verse bg-white padding-bottom-m">     <div class="container">       <div class="row">         <div class="p-wrap col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 col-xxl-6 offset-xxl-3">           <div class="innerblock">                           <div class="content-header">                 <h3 class="name">Reading I</h3>                 <div class="address">                                                                                                                                       <a href="https://bible.usccb.org/bible/genesis/11?1 ">Gn 11:1-9</a>                                   </div>               </div>               <div class="content-body">                 <p>The whole world spoke the same language, using the same words.<br> While the people were migrating in the east,<br> they came upon a valley in the land of Shinar and settled there.<br> They said to one another,<br> “Come, let us mold bricks and harden them with fire.”<br> They used bricks for stone, and bitumen for mortar.<br> Then they said, “Come, let us build ourselves a city<br> and a tower with its top in the sky,<br> and so make a name for ourselves;<br> otherwise we shall be scattered all over the earth.”</p>  <p>The LORD came down to see the city and the tower<br> that the people had built.<br> Then the LORD said: “If now, while they are one people,<br> all speaking the same language,<br> they have started to do this,<br> nothing will later stop them from doing whatever they presume to do.<br> Let us then go down there and confuse their language,<br> so that one will not understand what another says.”<br> Thus the LORD scattered them from there all over the earth,<br>...

CSS

.switch_button_3 {
  float: right;
  background: #3E0A4C;
  font-size: 14px;
  border-radius: 15px;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 99;
}
.pentecost_vigil_mass {
  background: yellow;
  height: auto;
}

.pentecost_extended_vigil {
  position: relative;
  background: red;
}

.bottom {
  position: relative;
}

JavaScript

jQuery(document).ready(function($) {
$('.pentecost_extended_vigil').hide();
$('.switch_button_3').click(function() {
    $('.pentecost_vigil_mass, .pentecost_extended_vigil').toggle()
 
	$(this).text(function(i, v){
	   return v === 'to Extended Vigil' ? 'To Vigil Mass' : 'to Extended Vigil'
	});
});
});