CODEWITHSUNDEEP
javascriptjquerywordpress
grapiuna
grapiuna

Reputation: 50

Get info from div to div with Javascript

I am trying to make the code shared on this fiddle to work on Wordpress but the Javascript doesn't work. I do not have other js file besides the one above. It works on the example but not on Wordpress.

$(function() {
  $('ul.eevmonths a').on('click', function() {
    $month = $(this).attr('class'),
      $('.eevcontent-' + $month).siblings().addClass('eevhide');
    $('.eevcontent-' + $month).removeClass('eevhide');
  });
});
a {
  text-decoration: underline;
  cursor: pointer;
  color: blue;
}

.eevhide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="eventmobile">
  <ul class="eevmonths">
    <li><a class="jan">1</a></li>
    <li><a class="feb">2</a></li>
    <li><a class="mar">3</a></li>
  </ul>
</div>

<div id="eevcontent">
  <div class="eevdefault-text">Default Text</div>

  <div class="eevcontent-jan eevhide">
    <h3>Januar</h3>
  </div>
  <div class="eevcontent-feb eevhide">
    <h3>Februar</h3>
  </div>
  <div class="eevcontent-mar eevhide">
    <h3>März</h3>
  </div>
</div>

Upvotes: 0

Views: 48

Answers (1)

Zorken17
Zorken17

Reputation: 1896

You most include jQuery in your HTML-file, like below with a script-tag <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

$(function(){
    $('ul.eevmonths a').on('click', function () {
        $month = $(this).attr('class'),
        $('.eevcontent-'+$month).siblings().addClass('eevhide');
        $('.eevcontent-'+$month).removeClass('eevhide');
    }); 
});
a{
    text-decoration:underline;
    cursor:pointer;
    color: blue;
}           
    .eevhide {
      display: none;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eventmobile">
    <ul class="eevmonths">
    	<li><a class="jan">1</a></li>
    	<li><a class="feb">2</a></li>
    	<li><a class="mar">3</a></li>
    </ul>
    </div>
    
    <div id="eevcontent">
        <div class="eevdefault-text">Default Text</div>
    
        <div class="eevcontent-jan eevhide">
        <h3>Januar</h3>
        </div>
        <div class="eevcontent-feb eevhide">
        <h3>Februar</h3>
        </div>
        <div class="eevcontent-mar eevhide">
        <h3>März</h3>
        </div>
    </div>

Upvotes: 1

Related Questions