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?

Do you have jQuery script loaded?

Sergio
– Sergio

2013-09-15 22:06:35 +00:00
Commented Sep 15, 2013 at 22:06 — Sergio
– Sergio, Commented Sep 15, 2013 at 22:06

l2aelba · Accepted Answer · 2013-09-15 22:17:26Z

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();
   });

edited Sep 15, 2013 at 22:17

answered Sep 15, 2013 at 22:06

l2aelba

22.3k23 gold badges108 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wojciech Parys Over a year ago

You all have right, thanks guys for your help. $(document).ready(function() { alert('JQUERY!') $('.position2').click(function () { alert('YES!'); }); }); I thought, that my js file was added to page, I have loaded jquery 1.4.4, so I don't know why it doesn't work for me. I added v1.10.1 above the code and it works. It's very good idea, to check 1st, that test jQuery. I will remember. Thanks for fast answers and for help. Now all work Thank you ;)

Charaf JRA · Accepted Answer · 2013-09-15 22:14:13Z

0

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();
   });
});

answered Sep 15, 2013 at 22:14

Charaf JRA

8,3551 gold badge36 silver badges45 bronze badges

1 Comment

Charaf JRA Over a year ago

toggle doesn't exist in jquery 1.4 , thats why

Collectives™ on Stack Overflow

Change CSS display to JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related