.verse{display:block;}

		
.dxaccord {}
.dxaccord-item {}
.dxaccord-item:last-child {}
.dxaccord-header {}
.dxaccord-content {display: none;transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
overflow: hidden;max-height: 0;padding-top: 0;padding-bottom: 0;}
.dxaccord-content.show {display: block;min-height: 30px;max-height: 500px;overflow:auto;}
  .hide {animation: fadeout 2s ;-webkit-animation: fadeout 2s ;animation-fill-mode:forwards;-webkit-animation-fill-mode: forwards/*forwards*/; }

@-webkit-keyframes fadeout {from {display:none;visibility:hidden;opacity:0;height: 0;}to {display:block;visibility:visible;opacity: 1;}}

@keyframes fadeout {from {display:none;max-height: 0;opacity:0;}to {max-height: 999px;opacity: 1;}}   
.doshow{animation: fadeoff 2s ;-webkit-animation: fadeoff 2s ;animation-fill-mode:forwards;-webkit-animation-fill-mode: forwards/*forwards*/; }
@-webkit-keyframes fadeoff {to {display:none;visibility:hidden;opacity:0;height: 0;}from {display:block;visibility:visible;opacity: 1;}}
@keyframes fadeoff {to {display:none;max-height: 0;opacity:0;}from {max-height: 999px;opacity: 1;}} 

/***
 *
<span class="dxaccord-item"> 
<span class="verse dxaccord-header">click</span>
<span class="dxaccord-content"><p>visibile</p></span>
</span>
***/