Custom accordion jquery

How to create custom accordion in jquery, simple accordion. 

Concept is that we use addClass() method and removeClass() both method then we can get this
effect.

Code demo

CSS Code:

<style>

.anythingContent{ display:none;transition: all 0.5s;}

    .anythingCollapse li:hover, .anythingCollapse h4.active{ color:#222; font-weight: 700; cursor:pointer; background:#fff; border-bottom: 0;}

    .anythingContent:after{ clear:both; display:block; content:""}

    .anythingCollapse .show{opacity: 1; transition: all 0.5s; display: block;}

    .anythingCollapse h4{  border: 1px solid #ccc; padding: 10px; background: #eee; margin: -1px auto 2px; font-weight: normal; position: relative; }

    .anythingCollapse h4::after{ content: '+'; position: absolute; right: 10px; top: 7px; font-size: 20px;     font-weight: 700;}

    .anythingCollapse h4.active::after{ content: '-'; position: absolute; right: 10px; top: 7px; font-size: 20px;

    font-weight: 700;}

    .anythingContent{   background: #fff; padding: 0 10px 10px; border: 1px solid #ccc; border-top: 0;

    margin-top: -2px;margin-bottom: 2px;}

</style>

HTML Code:

<div class="anythingCollapse">

    <h4 class="active">Accordion 1</h4>

    <div class="anythingContent show"> content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1 content 1</div>

    <h4>Accordion 2</h4>

    <div class="anythingContent"> content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2 content 2</div>

    <h4>Accordion 3</h4>

    <div class="anythingContent"> content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 content 3 </div>

    <h4>Accordion 4</h4>

    <div class="anythingContent"> content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4  content 4 </div>

    <h4>Accordion 5</h4>

    <div class="anythingContent"> content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5  content 5</div>

</div>

Jquery Code: 

<script>

   jQuery('.anythingCollapse h4').click(function(){

       jQuery(this).parents('.anythingCollapse').find('.anythingContent').removeClass('show');

       jQuery(this).next('.anythingContent').addClass('show');

       jQuery(this).addClass('active').siblings().removeClass('active');

   });

</script>