Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 226
  • Last Modified:

onmouseover vs. click

Hi,
I’m using the following combined with a CSS file to expand and contract a div.
<script type="text/javascript">
          $(document).ready(function () {
              $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").toggle(
         function () {
             $(this).parent().next("div.Content").show("medium");
             $(this).attr("class", "ArrowClose");
         },
         
          function () {
              $(this).parent().next("div.Content").slideUp("fast");
              $(this).attr("class", "ArrowExpand");
          });
      });
    }
    </script>

It works beautifully. I’d just like it to execute onmouseover (open) and onmouseout(close)

Thank you
0
thenrich
Asked:
thenrich
  • 4
  • 3
1 Solution
 
Kyle HamiltonData ScientistCommented:
this'll probably work, but I can't test it without a link to your page:

    <script type="text/javascript">
          $(function () {
              $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").on({

              mouseenter : 
                function () {
                    $(this).parent().next("div.Content").show("medium");
                    $(this).attr("class", "ArrowClose");
                    },

              mouseleave :   
                function () {
                    $(this).parent().next("div.Content").slideUp("fast");
                    $(this).attr("class", "ArrowExpand");
                    }
               });
            });
    </script>

Open in new window

0
 
thenrichAuthor Commented:
well I don't have the site out anywhere but if you could show me in the context of my own site that would be great.

www.ogtechllc.com - any one of the service pages are using jQuery for expanded div's
0
 
Kyle HamiltonData ScientistCommented:
this will work on your services page:

$(".ContainerPanel").mouseenter(function(){
                $(this).find(".Content").show("medium");
                  $(this).find(".ArrowExpand").attr("class", "ArrowClose");
            }).mouseleave(function(){
                $(this).find(".Content").slideUp("fast");
                $(this).find(".ArrowClose").attr("class", "ArrowExpand");
            });

Open in new window

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
thenrichAuthor Commented:
I've reduced the script to this:

 <script type="text/javascript">
        $(document).ready(function () {
            $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").mouseenter(

         function () {
             $(this).parent().next("div.Content").show("medium");
             $(this).attr("class", "ArrowClose");
         });
    </script>

I've had no luck. Am I missing something?
0
 
Kyle HamiltonData ScientistCommented:
why did you reduce the script?

Did you try what I posted? It will works on your Services page.
Here it is again in its entirety:

<script type="text/javascript">
$(function () {
$(".ContainerPanel").mouseenter(function(){
                $(this).find(".Content").show("medium");
                $(this).find(".ArrowExpand").attr("class", "ArrowClose");
            }).mouseleave(function(){
                $(this).find(".Content").slideUp("fast");
                $(this).find(".ArrowClose").attr("class", "ArrowExpand");
            });
});
</script>

Open in new window

0
 
thenrichAuthor Commented:
Yup that did it!

For whatever reason I could not get it to function the first time.

You’re a gentleman and scholar. Thx again!
0
 
Kyle HamiltonData ScientistCommented:
:-.)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now