Jquery UI - Accordion on asp.net

Question

Can't make work the simple 'accordion' script from JqueryUI on my asp.net page .aspx .

I can't find good documentation on the accordion on these cirumstances, only simple html <p><h3><div> etc...

For example this is my code on the aspx page:

<%@ Page Language="C#" MasterPageFile="~/Zulcon_ppal.Master" AutoEventWireup="true"    CodeBehind="EnvianosTuCurriculum.aspx.cs" Inherits="Grupo_Zulcon.EnvianosTuCurriculum" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
  heightStyle: "content"
});
});
</script>
<style type="text/css">
.curriculumContainer
{
width:90%;
color:#646464;
margin:30px auto;
}     and then more page specific css... </asp:Content>

Then i want to try it with a title in a <div> but nothing happens:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div class="fixed-width-wrapper contentContainer">

<div style="padding:20px">
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc; background-image:url('images/menuzulcon3.png'); height: 59px; width: 953px;" class="titulosGeneral";></div>
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Bachillerato</div>
  <div class="curriculumdivcompleto">
  <div id="accordion">
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
    <div style="margin-top:5px"><asp:TextBox ID="Lugar_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
    <div style="margin-top:5px"><asp:TextBox ID="Insti_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Año titulación</div>
    <div style="margin-top:5px"><asp:TextBox ID="año_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Años cursados</div>
    <div style="margin-top:5px"><asp:TextBox ID="cursados_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div>&nbsp;</div>
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Formación Superior</div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
    <div style="margin-top:5px"><asp:TextBox ID="Lugar_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
    <div style="margin-top:5px"><asp:TextBox ID="Nombre_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Titulo obtenido</div>
    <div style="margin-top:5px"><asp:TextBox ID="titulo_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq2">
    <div style="margin-top:10px" class="autenticacionTitulo">Año de titulación</div>
    <div style="margin-top:5px"><asp:TextBox ID="año_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq3">
    <div style="margin-top:10px" class="autenticacionTitulo">Semestres cursados</div>
    <div style="margin-top:5px"><asp:TextBox ID="Semestre_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
</div>
  </div>
    <div style="text-align:right; margin-top:20px"><asp:Button ID="Button3" runat="server" ValidationGroup="Curriculum" postbackurl="Envia4.aspx" OnClick="Register" CssClass="my_btn"/></div>
  </div>
  </div>

</asp:Content>

I don't know if i'm doing something wrong, could anyone shed some light on this?

Thanks in advance.

Answer 1

Found this in the documentation page, if it's what you are looking for

The markup of your accordion container needs pairs of headers and content panels:

<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>

Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.

UPDATES:

<div class="fixed-width-wrapper contentContainer">

<div style="padding:20px">
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc; background-image:url('images/menuzulcon3.png'); height: 59px; width: 953px;" class="titulosGeneral";></div>
  <div class="curriculumdivcompleto">
  <div id="accordion">
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Bachillerato</div>
  <div>
    <div class="curriculumLadoRegistroizq">
      <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
      <div style="margin-top:5px"><asp:TextBox ID="Lugar_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
    <div class="curriculumLadoRegistro2">
      <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
      <div style="margin-top:5px"><asp:TextBox ID="Insti_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
    <div class="curriculumLadoRegistroizq">
      <div style="margin-top:10px" class="autenticacionTitulo">Año titulación</div>
      <div style="margin-top:5px"><asp:TextBox ID="año_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
    <div class="curriculumLadoRegistro2">
      <div style="margin-top:10px" class="autenticacionTitulo">Años cursados</div>
      <div style="margin-top:5px"><asp:TextBox ID="cursados_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
  </div>
  <div>&nbsp;</div>
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Formación Superior</div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
    <div style="margin-top:5px"><asp:TextBox ID="Lugar_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
    <div style="margin-top:5px"><asp:TextBox ID="Nombre_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Titulo obtenido</div>
    <div style="margin-top:5px"><asp:TextBox ID="titulo_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq2">
    <div style="margin-top:10px" class="autenticacionTitulo">Año de titulación</div>
    <div style="margin-top:5px"><asp:TextBox ID="año_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq3">
    <div style="margin-top:10px" class="autenticacionTitulo">Semestres cursados</div>
    <div style="margin-top:5px"><asp:TextBox ID="Semestre_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
</div>
  </div>
    <div style="text-align:right; margin-top:20px"><asp:Button ID="Button3" runat="server" ValidationGroup="Curriculum" postbackurl="Envia4.aspx" OnClick="Register" CssClass="my_btn"/></div>
  </div>
  </div>