hover function not consistent with multiple nested accrodion

hi i am to totally new in web programming. i am trying to develop a jquery's nested accordion with hover method, here is my html, java script and css code along with link to jsfiddle.net is http://jsfiddle.net/sgjz7/

html:

<h2>A'ad the Tribe of</h2>

<h2>A'ad the Tribe of</h2>

<h2><a href "#">Chapter (41) sūrat fuṣṣilat (Explained in Detail)(Verse :15) </a></h2>

<h2><a href "#">Chapter (46) sūrat l-aḥqāf (The Curved Sand-hills)(Verse : 21) </a></h2>

</div>

<h2>Archaeological-Remains</h2>

<h2><a href "#">Chapter (29) sūrat l-ʿankabūt (The Spider)

(Verse :38) </a></h2>

</div>

<h2>Builders of Landmarks</h2>

<h2><a href "#">Chapter (26) sūrat l-shuʿarā (The Poets)

(Verse :128-129)</a></h2>

</div>

<h2>Challenged to the prophet</h2>

<h2><a href "#">Chapter (7) sūrat l-aʿrāf (The Heights) (Verse :71-72)</a></h2>

<h2><a href "#">Chapter (26) sūrat l-shuʿarā (The Poets)

(Verse :136-137)</a></h2>

</div>

<h2>Chastisement on</h2>

<h2><a href "#">Chapter (41) sūrat fuṣṣilat (Explained in Detail)(Verse :16)</a></h2>

<h2><a href "#">Chapter (51) sūrat l-dhāriyāt (The Wind that Scatter) (Verse :41-42) </a></h2>

<h2><a href "#">Chapter (53) sūrat l-najm (The Star)

(Verse-50) </a></h2>

<h2><a href "#">Chapter (41) Chapter (54) sūrat l-qamar (The Moon)(Verse : 18-21) </a></h2>

<h2><a href "#">Chapter (69) sūrat l-ḥāqah (The Inevitable)(Verse : 6-7) </a></h2>

<h2><a href "#">Chapter (89) sūrat l-fajr (The Dawn)

(Verse : 6) </a></h2>

</div>

<h2>Endowed with Intellect</h2>

</div>

<h2>Materialist and Powerful Nation</h2>

</div>

<h2>Scoffing and false Arguing</h2>

<h2><a href "#">Chapter (7) sūrat l-aʿrāf (The Heights)

(Verse:66-67)</a></h2>

<h2><a href "#">Chapter (11) sūrat hūd (Hud) (Verse :53-54)</a></h2>

<h2><a href "#">Chapter (26) sūrat l-shuʿarā (The Poets)

(Verse :123) </a></h2>

<h2><a href "#">Chapter (41) sūrat fuṣṣilat (Explained in Detail) (Verse :14)</a></h2>

</div>

<h2>Aaron (pbuh)</h2>

<h2>Aaron (pbuh)</h2>

<h2><a href "#">Chapter (28) sūrat l-qaṣaṣ (The Stories)(Verse :34) </a></h2>

<h2><a href "#">Chapter (20) sūrat ṭā hā(Verse : 29-32) </a></h2>

</div>

<h2>Aasea (Pharaoh's Wife)</h2>

<h2>Aasea (Pharaoh's Wife)</h2>

<h2><a href "#">Chapter (28) sūrat l-qaṣaṣ (The Stories)(Verse :8-9) </a></h2>

<h2><a href "#">Chapter (66) sūrat l-taḥrīm (The Prohibition)(Verse : 11-12) </a></h2>

</div>

<h2>A 'aisha (raa)</h2>

<h2>A 'aisha (raa)</h2>

<h2><a href "#">Chapter (24) sūrat l-nūr (The Light)(Verse :11-15) </a></h2>

</div>

<h2>Abdullah (chosen slaves of Allah swt)</h2>

<h2>Abdullah (chosen slaves of Allah swt)</h2>

<h2><a href "#">Chapter (4) sūrat l-nisāa (The Women)(Verse :172) </a></h2>

<h2><a href "#">Chapter (5) sūrat l-māidah (The Table spread with Food)(Verse : 72 & 78) </a></h2>

<h2><a href "#">Chapter (19) sūrat maryam (Mary)(Verse :30) </a></h2>

<h2><a href "#">Chapter (25) sūrat l-fur'qān (The Criterion)(Verse :63) </a></h2>

<h2><a href "#">Chapter (37) sūrat l-ṣāfāt (Those Ranges in Ranks)(Verse :40-42) </a></h2>

</div>

<h2>Abad-ur-Rahman (servant of Allah swt)</h2>

<h2>Abad-ur-Rahman (servant of Allah swt)</h2>

<h2><a href "#">Chapter (33) sūrat l-ahzāb (The Combined Forces)(Verse :44) </a></h2>

<h2><a href "#">Chapter (36) sūrat yā sīn(Verse : 58) </a></h2>

<h2><a href "#">Chapter (89) sūrat l-fajr (The Dawn) (Verse : 27-30) </a></h2>

</div>

<h2>Abel (Habil)</h2>

<h2>Abel (Habil)</h2>

<h2><a href "#">Chapter (5) sūrat l-māidah (The Table spread with Food)(Verse :28-31) </a></h2>

</div>

<h2>Abatement of crime</h2>

<h2>Abatement of crime</h2>

<h2><a href "#">Chapter (5) sūrat l-māidah (The Table spread with Food)(Verse :22) </a></h2>

<h2><a href "#">Chapter (11) sūrat hūd (Hud)(Verse : 113) </a></h2>

<h2><a href "#">Chapter (28) sūrat l-qassas (The Stories) (Verse : 83) </a></h2>

</div>

<h2>Ablution-(Wudhu)</h2>

<h2>Ablution-(Wudhu)</h2>

<h2><a href "#">Chapter (5) sūrat l-māidah (The Table spread with Food)(Verse :6) </a></h2>

</div>

<h2>Ablution without water (Consult; Tayammum)</h2>

<h2>Ablution without water (Consult; Tayammum)</h2>

<h2><a href "#">Chapter (4) sūrat l-nisāa (The Women)(Verse : 43) </a></h2>

<h2><a href "#">Chapter (5) sūrat l-māidah (The Table spread with Food)(Verse :22) </a></h2>

</div>

java script:

$(document).ready(function()

{ //Initialising Accordion

$(".accordion").tabs(".pane", { tabs: '> h2', effect: 'hover', initialIndex: null });

//The click to hide function $(".accordion h2").hover(function()

{ if ($(this).hasClass("current") && $(this).next().queue().length === 0) { $(this).next().slideUp(); $(this).removeClass("current"); } else

if (!$(this).hasClass("current") && $(this).next().queue().length === 0) { $(this).next().slideDown(); $(this).addClass("current"); }

});

now i am having the following problem:hover function not working properly for all three level of accordion.

i want consistency in hover function all three level of accordion. can anyone please help me to modify my java script to get consistent hover effect.

akm

Topic Participants
akmfaruque

hover function not consistent with multiple nested accrodion

hover function not consistent with multiple nested accrodion

Topic Participants

akmfaruque