Show/ Hide hidden div and change css

Question

I need to call a fuction when .innerodds-view is clicked to display: block #prop-bet-view (this should be defoult display:none;) + change the css of innerodds-view::before.

<div class="prop-bet-click">
  <a href="#" class="innerodds-view">CLICK HERE TO 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>

Answer 1

The best way to make it work is:

// Hide it programmatically and remove that class.
$("#prop-bet-view").hide().removeClass("hidden");
// Toggle it using the event.
$('.innerodds-view').on('click',function(){
  if (!$(this).hasClass("anim"))
    $("#prop-bet-view").toggle();
});
// With some fade effect.
$('.innerodds-view').on('click',function(){
  if ($(this).hasClass("anim"))
    $("#prop-bet-view").fadeToggle();
});

* {font-family: 'Segoe UI';}
/* CSS to make it hidden. */
.hidden {display: none;}
/* Some good UI. */
#prop-bet-view {background: #ccf; text-shadow: 1px 1px 2px #666; border-radius: 5px; padding: 5px; text-align: center; margin: 5px 0;}
#prop-bet-view p {margin: 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Trigger. -->
<button class="innerodds-view">Trigger</button> <button class="innerodds-view anim">Trigger Anim</button>
<!-- Add a CSS that doesn't make it display. -->
<div id="prop-bet-view" class="hidden">
  <p>Hello!</p>
</div>

Answer 2

DEMO HERE

Set its CSS first:

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

and then the JS

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

if you want to add some animation you can do as below:

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