I am adding a show/hide div to this site http://www.danstestsite.talktalk.net/

so far it's only on the left panel link "back pain"

I would like to change it so it operates with a mouse over.

 

Any tips on which bits I need to change?

 

I got the script from here;

 

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

 

It uses a bit in the head of index page and a seperate js file; animatedcollapsible.js

 

Thanks for looking.

You would be able to control this a lot easier with a library such as jQuery.

You would be able to control this a lot easier with a library such as jQuery.

 

 

It does use Jquery as well.

 

Thought there might be an easier way......

Is there a different jquery plugin i should be using?

Seems like a lot of unnecessary javascript to do such a simple thing.

Anyway, to answer your question, try changing this (in your HMTL):

 

<a href="javascript:animatedcollapse.toggle('cat')">Back Pain</a> 

 

To this:

 

<a href="#" onmouseover="javascript:animatedcollapse.toggle('cat')" onmouseout="javascript:animatedcollapse.toggle('cat')" onclick="return:false;">Back Pain</a> 

Thanks Andyl,

 

Worked a treat / on one link

if i add secound link below it goes into a open close loop?

 

What would the better way have been?

use a different jquery plugin or should I just brush up on javascript...

Just use this jQuery:

$(document).ready(function(){
  /*Copy, paste and edit the code below for the divs you need...*/
  $("#a_ID").mouseover(function(){
    $("#div_ID_slide").slideToggle(500);
  });
  $("#a_ID").mouseout(function(){
    $("#div_ID_slide").slideToggle(500);
  });
  /*Copy, paste and edit the code above for the divs you need...*/
});

 

Then use this HTML for the link to open a div:

<a onclick="return false;" href="#" id="a_ID">Back Pain</a>

 

And this HTML for a div which is to be opened:

<div id="div_ID_slide" style="display:none;">Lorem ipsum...</div>

 

Change the id attribute of the link and div, and the values $("HERE") in the jQuery according to your page. It should work...

You could do some function to make the code shorter, but this will get the job done.

What can I say...

 

Very helpful.

 

Thanks again Andy.

No problem

Let me know if you need any more help regarding this topic...just post here and I'll respond.

 

If there's a lot of these sliding <div> areas I could probably fix up a function which would reduce code length; but I'll let you crack on with the above for now

Hi,

Still having problems when adding more than 1.

Back pain works but Neck pain goes crazy .

I must have missed something out?

 

http://www.danstestsite.talktalk.net/

oops forget previous..I didn't name all correctly.

Thanks again.

If I wanted to change to onclick instead of mouse over

what's the easiest way?

 

much appreciated.

For click...

 

$(document).ready(function(){
  /*Copy, paste and edit the code below for the divs you need...*/
  $("#a_ID").click(function(){
    $("#div_ID_slide").slideToggle(500);
  });
  /*Copy, paste and edit the code above for the divs you need...*/
});

For click...

 

$(document).ready(function(){
  /*Copy, paste and edit the code below for the divs you need...*/
  $("#a_ID").click(function(){
    $("#div_ID_slide").slideToggle(500);
  });
  /*Copy, paste and edit the code above for the divs you need...*/
});

 

Thanks Andy,

 

Left a comment on your new blog.

Looked a bit bare.

Thanks Andy,

 

Left a comment on your new blog.

Looked a bit bare.

 

No problem

Thanks! I haven't had anytime recently to finish that blog or even add to it! Too busy with clients - a good thing I suppose!