JQuery Accordion Buried in a Table within Dynamic Page -
i'm trying access moveover property of accordion buried under divs , other stuff. here html:
<body> <form id="form1" runat="server" > <div id="content" class="content"> <table style="width: 1200px"> <tr> <td style="width: 800px"> <h1>title here</h1><br /> stuff here.. blah blah.. <div id="wrapping" class="wrapping"> <p class="accordionbutton"><strong>water-related services</strong></p> <div class="accordioncontent"> item 1<br /> item 2<br/> item 3<br /> </div> <p class="accordionbutton"><strong>fire , smoke problem</strong></p> <div class="accordioncontent"> item 1<br /> item 2<br /> item 3<br /> </div> <p class="accordionbutton"><strong>mold problems</strong></p> <div class="accordioncontent"> mold remediation<br /> </div> </div> </td> <td style="width:auto; text-align:center"> <p style="text-align:center; font-size:xx-large; color:red">call today</p><br /> </td> </tr> </table> </div>
here portion of script i'm using try access accordion buttons:
$('.wrapping').find('p.accordionbutton').mouseover(function() { $('div.accordioncontent').slideup('normal'); $(this).next().slidedown('normal'); });
i've placed alert command inside mouseover function , never fires, know i'm not reaching accordion button properly. can help?
added: here entire jquery script. it's not big, it's redundant. have asp.net page dynamic web page. know have redundancies, i'm new @ jquery:
// check hash value in url
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-4)){ var toload = hash + '.htm #content'; $('#content').load(toload) } });
$(document).ready(function() {
//accordion button action $('.wrapping').find('p.accordionbutton').mouseover(function() { $('div.accordioncontent').slideup('normal'); $(this).next().slidedown('normal'); }); //hide divs on page load $(".accordioncontent").hide(); if (hash=="") { $('#content').load("welcome.aspx #content", shownewcontent()); } $('#nav li a').click(function(){ var toload = $(this).attr('href')+' #content'; $('#content').hide('fast',loadcontent); $('#wrapper').append('<span id="load">loading...</span>'); $('#load').fadein('normal'); function loadcontent() { $('#content').load(toload,'',shownewcontent()) } function shownewcontent() { $('#content').show(hideloader()); } function hideloader() { $('#load').fadeout('normal'); } return false; }); function loadcontent() { $('#content').load(toload,'',shownewcontent()) } function shownewcontent() { $('#content').show(hideloader()); } function hideloader() { $('#load').fadeout('normal'); }
});
you can try eliminate ambiguity:
<div id="wrapping" class="wrapping">
i suggest remove class on div:
<div id="wrapping">
and have change jquery selector:
$('#wrapping').find( ...
Comments
Post a Comment