Adding Class to Element using jQuery

Question

I have an area on my website where Terms used are explained.

I have it set so that anyone can click on the header and the description then opens up.

I wanted to add an "::after" area with a down arrow when closed which changes to an up arrow when open.

I find that the code which I am using works fine on JSFiddle but I am having issues on my wordpress site.

The description is shown and works fine in that sence. but on clicking h2, the class .active is not added

Code:

function toggleAnswer() {
  jQuery(this).next('.jargon-desc').slideToggle();
}

jQuery('.jargon-desc').hide();

jQuery('.jargon-header').click(toggleAnswer);

jQuery(document).ready(function () {
  jQuery("h2").on('click', function () {
      jQuery(this).toggleClass('active');
  });
});

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
.jarg-container {
    background: #018fcf;
    box-shadow: 4px 5px 14px 1px black;
    margin: 0 2.5% 2em;
    transition: all .75s ease;
    border-radius:15px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.jarg-container h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color:cornsilk;
}
.jarg-container h2::after {
    font-size: 0.5em !important;
    right: 10%;
    position: absolute;
}
.jargon-desc {
    color: black;
    padding: 0 0 1em 0;
    background:white;
    padding:1em;
    border-radius: 0 0 15px 15px;
    border-top: 2px ridge gainsboro;
}
.jargon-instruction p {
    color: black;
    font-size: 1.5em;
    padding-left: 1.5em;
    position: relative;
    bottom: 1em;
    text-decoration: underline;
}
.jargon-header::after {
    content: "\f0dd";
    font-family: FontAwesome;
}
.jargon-header.active::after {
    content: "\f0de";
    font-family: FontAwesome;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="primary" class="content-area">
                    <main id="main" class="site-main" role="main">
                        <div class="col-md-12">
                            <div class="col-md-5 jarg-container">
                                <h2 class="jargon-header">Header</h2>
                                <div class="jargon-desc">
                                    <p>Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description .</p>
                                </div>
                            </div> 
                        </div>
                    </main>
                    <!-- #main --> 
                </div>
                <!-- #primary --> 
            </div>
        </div>
    </div>
</main>

Any help figuring out why would be great

*"I find that the code which I am using works fine on JSFiddle but I am having issues on my wordpress site."* That's because jsFiddle has a **very** surprising default: It puts all your code in a `window` `load` handler. Apparently, when putting your script into Wordpress, you're putting it somewhere that it's included before the elements exist in the DOM. Move anything that needs to find elements on the page *into* your `ready` handler. See the linked question for why. (Or better yet: Find out how to add your script to the *end* of the page, just before the closing `
` tag.) — T.J. Crowder, Mar 10 '19 at 19:53
@T.J.Crowder Could that have something to do with the way the CDN I am using delivers the scripts? it seems half the script works as the show/hide works. but the add class doesnt, its all on the same script... — SupGen, Mar 10 '19 at 20:08

Adding Class to Element using jQuery

0 Answers0