Home/ Questions/Q 3780942
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T10:52:43+00:00

I had this question before but I may not have asked it correctly the

  • 0

I had this question before but I may not have asked it correctly the first time, so here is my second attempt. I am creating a site with dynamic web pages. On one of these pages I have 3 accordions underneath a table, but surrounded in a Div called “wrapping”. In order to have these accordions seen as part of the dynamic page, I am including them within a Div I called “content” (as both ID name and class name for testing purposes).

Here is the HTML section for the dynamic content containing these accordions:

<body>
<form id="form1" runat="server" >
<div id="content" class="content">
    <table style="width: 1200px">
        <tr>
            <td style="width: 800px">
                <h1>Title</h1><br />
                blah blah
              </td>
          </tr>
    </table>

    <div id="wrapping" class="wrapping">
        <p class="accordionButton"><strong>Service 1</strong></p>
        <div class="accordionContent">  
            Item1<br />
            Item2<br/>
        </div>
        <p class="accordionButton"><strong>Service 2</strong></p>
        <div class="accordionContent">
            Item1<br />
            Item2<br />
        </div>
        <p class="accordionButton"><strong>Service 3</strong></p>
        <div class="accordionContent">
            Item1<br />
        </div>                       
    </div>
</div>
</form>
</body>

Here is the entire relevant Jquery code segment I’m using:

 $(document).ready(function() { 
   $('.wrapping').find('p.accordionButton').each(function() 
       { alert("found it") });  //Test

    //ACCORDION BUTTON ACTION    
    $('.wrapping').find('p.accordionButton').mouseover(function() {
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $(".accordionContent").hide();
    });

Here is the CSS associated with the program, including some styles that do not apply for this example:

  #load {   
     display: none;   
     position: absolute;   
     right: 10px;   
     top: 10px;   
     background: url(images/ajax-loader.gif);   
     width: 43px;   
     height: 11px;   
     text-indent: -9999em;   
 }

 #nav-menu ul
 {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 #nav-menu li
 {
    float: left;
    margin: 0 0.15em;
 }

 #nav-menu li a
 {
    background: url(background.gif) #fff bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 9em;
    display: block;
    border: 0.1em solid #dcdce9;
    color: #0d2474;
    text-decoration: none;
    text-align: center;
 }

  #nav-menu li a
 {
   float: none
 }

 #nav-menu
 {
   width:30em
 } 

.accordionButton
{
width: 650px;
float: left;
background: #99CC99;
border-bottom: 1px solid #FFFFFF;
cursor: pointer;
text-align: center;
 }

 .accordionContent {    
width: 650px;
float: left;
background: #95B1CE;
display: none;
}

Question:
I can find each of the accordion buttons on the page by the test statement above (I get 3 alerts, one for each accordionButton), but can’t do a mouseover using the same method. Why is that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I solved this issue by removing the code that enabled dynamic pages. That simplified the code and removed a level of complexity.

    The code shown above works, and I even made it fancier. If you are curious about it, check out my test site.

    • 0