jQuery Forum

Hello,

I am trying to figure out how to make the expand/collapse arrow images work in my HTML document.

The menu itself works just fine. When clicking on the heading, its contents are displayed and when you click on it again, they disappear. So as far as that part, everything is fine. The only thing that doesn't work properly are the right/down arrows.

When the page is loaded, the right arrows are displayed. Upon clicking on the heading, it becomes a down arrow. But then the problem comes in. When I collapse the heading, the image doesn't change back to a right arrow and remains a down arrow. How do I fix this? I've tried different methods and still haven't come up with a solution that works.

CSS:

1. .floatmenu {
2.     position: fixed;
3.     margin-top: 15px;
4.     margin-left: 955px;
5.     border: 2px solid #000000;
6.     background: #E6E6E6;
7.     width: 300px;
8.     box-shadow: 6px 6px 4px #888;
9. }
10. .floatmenu ul{
11.     list-style-type: none;
12. }
13. .floatmenu ul li a {
14.     overflow: auto; /*force hasLayout in IE7 */
15.     text-decoration: none;
16.     color: #000000;
17. }
18. .floatmenu ul li a:hover {
19.     color: #700212;
20.     text-decoration: underline;
21. }
22. .heading {
23.     list-style-type: none;
24.     font: bold 13px Arial, Helvetica, sans-serif;
25.     cursor: pointer;
26.     line-height:1.5em;
27.     text-indent:-20px;
28.     background: url(right1.gif) no-repeat 97% 50%;
29. }
30. .content {
31.     font: bold 12px Arial, Helvetica, sans-serif;
32.     text-indent:-40px;
33. }

jQuery:

1. <script type="text/javascript">
2. jQuery(document).ready(function()
3. {
4.   jQuery(".content").hide();
5.   jQuery(".heading").click(function()
6.   {
7.  jQuery(this).css({backgroundImage:"url(down1.gif)"}).next(".content").slideToggle(500).siblings(".content").slideUp("slow");
8.  jQuery(this).siblings().css({backgroundImage:"url(right1.gif) no-repeat 97% 50%"});
9.   });
10. });
11. </script>

HTML:

1. <div class="floatmenu">
2.  <ul class="floatmenulist">
3.     <li class="heading">External Links</li>
4.         <div class="content">
5.             <ul class="floatsubmenu">
6.                   <li><a href="#">Aflac Benefit Claim Form</a></li>
7.                   <li><a href="#">CareFirst.com</a></li>
8.                   <li><a href="#">MyPayCenter.com</a></li>
9.                   <li><a href="#">Sharefile Login</a></li>
10.                   <li><a href="#">Wellness Tips</a></li>
11.                   <li><a href="#">Jimmy John's Lunch Menu</a></li>
12.                   <li><a href="#">Ruby Tuesday's To Go Menu</a></li>
13.               </ul>
14.         </div>
15.     <li class="heading">Anniversaries</li>
16.         <div class="content">
17.             <ul class="floatsubmenu">
18.                   <li>Insert anniversaries here</li>
19.               </ul>
20.         </div>
21.     <li class="heading">Birthdays</li>
22.         <div class="content">
23.             <ul class="floatsubmenu">
24.                   <li>Insert birthdays here</li>
25.               </ul>
26.         </div>
27.  </ul>
28. </div>