javascript - Show/ Hide hidden div and change css -

i need call fuction when .innerodds-view clicked display: block #prop-bet-view (this should defoult display:none;) + change css of innerodds-view::before.

<div class="prop-bet-click">   <a href="#" class="innerodds-view">click here view prop bets</a>       <div id="prop-bet-view">                  <?php if( have_rows('prop-bet-view') ): ?>                     <?php while ( have_rows('prop-bet-view') ) : the_row(); ?>                           <ul class="prop-bet-block">                             <li class="prop-bet-title">                             <div class="prop-bet-text"><?php the_sub_field('prop_bet_text'); ?></div>                            </li>                              <li class="prop-odds">                              <div class="prop-odds-title"><?php the_field('prop-odds-title'); ?></div> <div class="prop-odds-nr"><a href="<?php the_sub_field('prop_odds_url'); ?>"><?php the_sub_field('prop_odds_nr'); ?></a></div>                             </li>                             <li class="prop-bet-at-block">                                <div class="prop-bet-at">  <?php the_field('prop_bet_at'); ?> </div>  <div class="prop-img"><a href="<?php the_sub_field('prop_img_url'); ?>">  <img src="<?php the_sub_field('prop_img'); ?>" alt="" style="max-width: 47px;" /> </a></div>                               </li>                          </ul>                      <?php endwhile; ?>                 <?php endif; ?>                  </div>          </div> 

demo here

set css first:

#prop-bet-view {     display:none; } 

and js

$('.innerodds-view').on('click',function(){       $("#prop-bet-view").toggle(); }); 

if want add animation can below:

$("#prop-bet-view").toggle('slow');