Change CSS display to JavaScript

Question

I got this code on my page:

HTML:

<table class="position2" cellpadding="0" cellspacing="0" border="0">
        <tbody><tr valign="top">
          <td class="my-width">  <div class="region region-top1">
    <div class="block block-menu" id="block-menu-menu-drugie-menu-testowe">
<div class="art-block clearfix">
        <div class="art-blockheader"><h3 class="t subject">
  Moje kursy</h3>
</div>        <div class="art-blockcontent"><ul class="menu"><li class="first leaf"><a href="/?q=node" title="">Test</a></li>
<li class="last leaf"><a href="/?q=node" title="">test2</a></li>
</ul></div>
</div></div>
  </div>
</td>
          <td class="my-width">  <div class="region region-top2">
    <div class="block block-menu" id="block-menu-menu-menu-testowe">
<div class="art-block clearfix">
        <div class="art-blockheader"><h3 class="t subject">
  Marketing</h3>
</div>        <div class="art-blockcontent"><ul class="menu"><li class="first collapsed"><a href="/?q=node" title="">Link testowy</a></li>
<li class="last leaf"><a href="http://drupal.org" title="">Link2</a></li>
</ul></div>
</div></div>
  </div>
</td>
          <td class="my-width">  <div class="region region-top3">
    <div class="block block-menu" id="block-menu-menu-menu-top3">
<div class="art-block clearfix">
        <div class="art-blockheader"><h3 class="t subject">
  BHP</h3>
</div>        <div class="art-blockcontent"><ul class="menu"><li class="first last leaf"><a href="/?q=node" title="">Link testowy</a></li>
</ul></div>
</div></div>
  </div>
</td>
          <td class="my-width">  <div class="region region-top4">
    <div class="block block-menu" id="block-menu-menu-menu-top4">
<div class="art-block clearfix">
        <div class="art-blockheader"><h3 class="t subject">
  Zarządzanie</h3>
</div>        <div class="art-blockcontent"><ul class="menu"><li class="first last leaf"><a href="/?q=node" title="">Link testowy</a></li>
</ul></div>
</div></div>
  </div>
</td>
          <td class="my-width">  <div class="region region-top5">
    <div class="block block-menu" id="block-menu-menu-menu-top5">
<div class="art-block clearfix">
        <div class="art-blockheader"><h3 class="t subject">
  E-learning</h3>
</div>        <div class="art-blockcontent"><ul class="menu"><li class="first last leaf"><a href="/?q=node" title="">Link testowy</a></li>
</ul></div>
</div></div>
  </div>
</td>
        </tr>
      </tbody></table>

And simple hide art-blockcontent div with css:hover

.position2 .art-blockcontent {
    display: none;
}

.position2:hover .art-blockcontent {
    display: block;
}

And i need to convert it to javascript on click. On click show, next click hide.

I tried this:

$(".position2").click(function () {
$(".art-blockcontent").toggle("slow");
});

But it doesn't work. Any suggestions?

Answer 1

First thing you have to do, TEST YOUR JQUERY WORK

$(document).ready(function() {
    alert('JQUERY!')
    $('.position2').click(function () {
          alert('YES!');
    });
});

So click your .postion2 element, if its work so....

Use .hide() or .fadeOut() or toggleClass() (with your CSS) or .toggle()

   $('.position2').click(function () {
      $('.art-blockcontent', this).hide();
    });

or

   $('.position2').click(function () {
      $('.art-blockcontent', this).fadeOut();
   });

To show and hide, do like...

   $('.position2').click(function () {
      $('.art-blockcontent', this).toggle('slow');
   });

or

   $('.position2').toggle(function(){
     $('.art-blockcontent', this).hide();
   },function(){
     $('.art-blockcontent', this).show();
   });

Answer 2

Your code is working , try this demo , check if jquery is loaded,may be this is your problem:

$(document).ready(function(){

    $(".position2").click(function () {
    $('.art-blockcontent').toggle();
   });
});