Home/ Questions/Q 9126681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:05:50+00:00

I am trying to create jquery slidetoggle effect on an unordered list. it toggles

  • 0

I am trying to create jquery slidetoggle effect on an unordered list.
it toggles on but then immediately slides back up. I am unable to figure out if it is my css or if it is my jquery. BTW i am unable to get this working with my jsfiddle for some reason so the jsfiddle is only a view of my css, html and jquery.
Here is the jquery I am using:

function accordionLoad() {

    $(".accordion-header").removeClass("expanded");
    $(".accordion-content").hide();

    $(".accordion-header").bind("click", function(){
        $(this).toggleClass("expanded");
        $(this).next(".accordion-content").slideToggle();
    })

    $(".expand-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideDown();
        $(this).siblings(".accordion").find(".accordion-header").addClass("expanded");
    })

    $(".collapse-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideUp();
        $(this).siblings(".accordion").find(".accordion-header").removeClass("expanded");
    })
}

$(document).ready(function(){
    accordionLoad();
});

and the html..

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<meta name="Microsoft Theme" content="HDRDefault 1011, default" />

</head>
<body> 
<div class="container">
  <div class="expand-all">Expand All</div><div class="collapse-all">Collapse All</div>
  <UL class="accordion">
    <LI class="accordion-item">
      <DIV class="accordion-header">Question2</DIV>
      <DIV class="accordion-content">
        <DIV class="Externa">Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..</DIV>      
      </DIV>
    </LI>

    <LI class="accordion-item">
      <DIV class="accordion-header">Question12</DIV>
      <DIV class="accordion-content">
        <DIV class="Externa">Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..</DIV>      
      </DIV>
    </LI>  
  </UL>
  </div>  
</body>
</html>

Here is the jsfiddle:
http://jsfiddle.net/9CNeX/8/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See this example…

    jsfiddle

    $('.accordion-header').on('click', function(e){
  $(this).next().slideToggle();
});

    Greetings.

    • 0