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.

I believe what the accordion function does is to sequentially group every two child block elements in the target element , and the first one in every group is gonna be taken as a title bar and the second one as content. So what are you trying to achieve here? Seems you only have one child div under #accordion element. — aarryy
– aarryy, Commented Oct 10, 2013 at 16:17
When using basic ui it has default of using h3 as the title like here jqueryui.com/accordion/...I think if you want to use divs you will need to add it in the function as a header: "" — Riskbreaker
– Riskbreaker, Commented Oct 10, 2013 at 16:17
@aarryy well, sorry about that, it's just an example, you right but if i put more 'divs' or child elements, it doesn't works either - Riskbreaker thx, do you know where can i find some documentation on this 'div' case? — NeoVe
– NeoVe, Commented Oct 10, 2013 at 16:21
can you put your more divs or child elements in your code as well so we can figure out where the problem is — aarryy
– aarryy, Commented Oct 10, 2013 at 16:24
Which parts do you want to use as headers and which parts as contents? The code you posted actually works, just not the way you expected. It grouped every two divs with class name "curriculumLado..." and takes the first one as header and the one comes right after as its associated content, which in my view is not what you expected since they seem all paralleled and identical in the structure. — aarryy
– aarryy, Commented Oct 10, 2013 at 16:38

aarryy · Accepted Answer · 2013-10-10 17:14:07Z

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>

Thank you, already saw that, but it doesn't works, already have titles with a specific style i cannot 'break' anyway, and yes, already tried just to see if it worked with <h3's> in that order, but nothing... you see, i have plenty of classes in my divs, and i think there must be something tricky under .aspx pages, but thank you anyway :)
Yes i did something like this before, but did not work, anyways, thank you very very much for your help, i think i'm going to use this [ajaxcontroltoolkit.codeplex.com/][AjaxCodeplex] it is made specifically for asp, think is safer, and 'healthier' lol, but i'll re-try this with Jquery just to see if i missed something :)

Collectives™ on Stack Overflow

Jquery UI - Accordion on asp.net

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related