Skip to main content
se añadieron 8440 caracteres en el cuerpo
Origen Enlace
Alvarez
  • 4k
  • 4
  • 18
  • 39

Bueno, les explico, este acordeon es el de bootstrap, como podran ver no utiliza nada de javascrip,Es solo el bootstrap.js y bootstrap.css y jquery.js, se usa la propiedad collapseun ejemplo de bootstrap, y entonces todo es base a ID, al hacer collapse de un acordeon con X id, se oculta, y se muestra otro ID. Y siempre se conserva tus estilos y el responsive de lo que ya tenias, te puse varias formas en loscodigo que puedes ordenar los accordeones, all ilo podrias acomodar a tu gustodeberas de escribir. En la parte que dice bachata estan los detalles que puedes agregar a cada video Puedes explorarlo, si los dettalles estan vacios no se muestra nada como en los otros incisos.

Si no te gusta que salga la palabra "Detalles" puedes aplicar algun icono o algo parecido.

Espero te sirvalleva bootstrap por diseño, y cumpla tus requerimientos, saludos.el css esta en links externos

.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover {
  background: #f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items: center;
  /*justify-content:space-between;*/
}

.play {
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width: 60%;
  white-space: normal !important;
}

.view-preview,
.length {
  color: #000;
  text-align: center;
}

.view-preview {
  width: 23%;
}

.length {
  width: 10%;
}
<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/course-landing-page/desktop/hb.6e1c07383f3a2a838d7c2eb9668cb7f1.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div<link class="panelhref="https://www.udemy.com/staticx/udemy/js/webpack/v5/entry-group"main.314642c6da280521a2420a4b39ddf9fa.css" id="accordion1">rel="stylesheet" />
<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/entry-main.314642c6da280521a2420a4b39ddf9fa.css" rel="stylesheet" />
<div class="panelclass="col-xxs-8 panelleft-default">col">
    <div class="panelclass="clp-heading">
      <h4 class="panelcomponent-title">render">
    
    <div <auser-tracker-in-viewport="" data-toggle="collapse"user-tracker-page="clp" data-parent="#accordion1" href="#collapseOne">
                   Videos Clasicosuser-tracker-schema="clp-activity">
             <div data-user-tracker-object-id="957106" </a>data-user-tracker-action="seen-curriculum">
      </h4>div>
    </div>
 
    <div id="collapseOne"class="curriculum-wrapper" class="paneldata-collapsepurpose="course-curriculum" collapse">curriculum-loader="" data-course-id="957106" data-course-preview-path="/957106/preview/" data-num-displayed-items="10" data-has-more-to-load="1">

      <span id="curriculum" class="in-page-offset-anchor" style="top: -88px;"></span>

      <div class="chapters">class="curriculum-header-container">
        <ul<div class="view">class="header-left">
          <li><div class="curriculum-header-title">

            <aPrograma class="rows"de href="video.mp4">este curso

          </div>
    <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"><  </div>

        <div class="header-right">
          <span class="js-toggle-all">
                        
                            <div class="videoclass="collapsed-title">audiotext">
 video audio video audio video<                           <a class="sections-toggle" user-tracker-click="" data-user-tracker-schema="action-logs" data-user-tracker-object-id="957106" data-user-tracker-action="full-curriculum-read" data-user-tracker-user-id="">
                                    Ampliar todo
                                </a>
                            </div>
                            <div class="viewclass="expanded-preview">&nbsp;Vistatext">
 Previa<                               <a class="sections-toggle">
                                    Contraer todo
                                </a>
                            </div>
                            <div class="length">&nbsp;02:34<class="num-lectures">
                                274 clases
                            </div>
                        
                    </a>span>
          <span class="curriculum-header-length">
                        40:14:12
                    </li>span>
        </div>

   <li>   </div>


      <div class="content-container">
     <a class="rows" href="video2 <div class="section-container" data-toggle="collapse" data-target=".mp4">lecture-957106-1">
          <div class="section-header-left">
            <span class="lecture-title">
                            <div class="play"><imgclass="lecture-title-toggle-wrapper">
 src="http:                               <span class="lecture-title-toggle js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">
                                    <span class="lecture-title-toggle-plus">+</span>
            <span class="lecture-title-toggle-minus">–</span>
            </www.murata.comspan>
          </imagesdiv>
          <span class="lecture-title-text">Introducción</iconsspan>
          </mooniconsspan>
        </moonicondiv>
        <div class="section-play.png"><header-right">
          <span class="num-sections js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">
                            
                                2 clases
                            
                        </span>
          <span class="section-header-length">
                            05:58
                        </span>
        </div>
      </div>
      <div class="lectures-container js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">

        <div class="videoclass="lecture-title">audiocontainer video audiolecture-container--preview video" audiodata-purpose="lecture-item-1-1">
 video<         <div class="left-content">
            <span class="udi udi-play-circle"></div>span>
            <div class="top">

              <div class="viewclass="description collapse description-preview">&nbsp;Vista957106-1-1">
 Previa<               <p>Introducción al curso de Desarrollo de Aplicaciones y Juegos para Android con una visión global del contenido&nbsp;</p>
              </div> 

              <div class="length">&nbsp;02class="title">

                <a open-modal="" href="javascript:34<void(0)" data-template-url="/957106/preview/?startPreviewId=7072582" data-course-id="957106" data-lecture-id="5722726" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview">
                                                Introducción
                                            </a>


                <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-1-1" data-purpose="lecture-caret-1-1"></i>

              </div>
            </div>
          </div>

          <div class="details">

            <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7072582" data-course-id="957106" data-lecture-id="5722726" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview"
              data-purpose="preview-course">
              <span class="preview-text">Vista previa</span>
            </a>

            <span class="content-summary">
                                    02:20
                                </li>span>
          </ul>div>
        </div>

        <hr>


        <div class="lecture-container " data-purpose="lecture-item-1-2">
          <div class="left-content">
            <span class="udi udi-play-circle"></span>
            <div class="top">

              <div class="description collapse description-957106-1-2">
                <p>Aquí te explicaré como está estructurado el curso, qué temas tratará cada tutor y cómo beneficiarte plenamente de todo el material que se ha preparado para ti</p>
              </div>

              <div class="title">

                Como seguir este curso


                <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-1-2" data-purpose="lecture-caret-1-2"></i>

              </div>
            </div>
          </div>

          <div class="details">

            <span class="content-summary">
                                    03:38
                                </span>
          </div>
        </div>


      </div>
    </div>
  </div>

    <div class="panelclass="content-container">
 panel     <div class="section-default">container" data-toggle="collapse" data-target=".lecture-957106-2">
        <div class="panelclass="section-heading">header-left">
      <h4 class="panel   <span class="lecture-title">
        <a data                   <div class="lecture-toggle="collapse"title-toggle-wrapper">
 data                               <span class="lecture-parent="#accordion1"title-toggle href="#collapseTwo">js-curriculum-collapse collapse lecture-957106-2 ">
            Bachata                        <span class="lecture-title-toggle-plus">+</span>
          <span class="lecture-title-toggle-minus">–</span>
          </a>span>
        </h4>div>
        <span class="lecture-title-text">Introducción a Java</span>
        </span>
      </div>
      <div class="section-header-right">
        <span class="num-sections js-curriculum-collapse collapse lecture-957106-2 ">
                            
                                15 clases
                            
                        </span>
        <span class="section-header-length">
                            02:19:20
                        </span>
      </div>
    </div>
    <div id="collapseTwo" class="panelclass="lectures-collapse collapse">
    container collapse <divjs-curriculum-collapse class="panellecture-body">957106-2 ">

        <div class="collapseclass="lecture-group" id="#accordion2">
          <div class="chapters">
            <ul class="view">
              <li>
                <a class="rows" href="video.mp4">
                  <divcontainer class="play"><img" src="http://www.murata.com/images/icons/moonicons/moonicondata-play.png"></div>
                  <div class="videopurpose="lecture-title">audio video audio video audio video</div>
                  <div class="viewitem-preview">&nbsp;Vista Previa</div>2-1">
                  <div class="length">&nbsp;02:34</div>class="left-content">
                  <p><a<span data-toggle="collapse"class="udi dataudi-parent="#accordion2" dataplay-target="#collapseTwoOne">Detalles &raquo;</a></p>
                  <p class="collapse" id="collapseTwoOne">La descripcion de tu video</p>
                <circle"></a>span>
             <div </li>class="top">

            <div class="description collapse description-957106-2-1">
              <p>Aprender java puede ser fácil y divertido. Con este tutorial te introducirás en la programación en Java.</p>
              <p><br></p>
              <p><br></p>
            </div>

            <div class="title">

              <li>Introducción a Java


              <i class="udi <audi-caret-down class="rows"down-arrow" href="video2data-toggle="collapse" data-target=".mp4">description-957106-2-1" data-purpose="lecture-caret-2-1"></i>

            </div>
      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"><  </div>
        </div>

        <div class="details">

 <div class="video-title">audio video audio video audio video</div>
   <span class="content-summary">
              <div class="view-preview">&nbsp;Vista Previa</div>
                  <div class="length">&nbsp;02 04:34</div>24
                                </a>span>
        </div>
      </li>div>
   
      <hr>


      <p><a<div style="marginclass="lecture-left:container 1%;"" data-toggle="collapse" datapurpose="lecture-parent="#accordion2"item-2-2">
 data       <div class="left-target="#collapseTwoTwo">Detallesscontent">
 &raquo;</a><         <span class="udi udi-play-circle"></p>span>
          <div class="top">

   <p style="margin        <div class="description collapse description-left:957106-2-2">
 1%;" class="collapse" id="collapseTwoTwo">La descripcion          <p>Normas de sintaxis que debes cumplir en Java para que tu segundocódigo video<pueda ejecutarse</p>
            </ul>div>

            <div class="title">

              Sintaxis en Java


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-2" data-purpose="lecture-caret-2-2"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    06:07
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container  lecture-container--preview " data-purpose="lecture-item-2-3">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-3">En este video veras ejemplos de las variables mas basicas de Java para los tipos de datos más usados</div>

            <div class="title">

              <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7066256" data-course-id="957106" data-lecture-id="5944750" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview">
                                                Variables
                                            </a>


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-3" data-purpose="lecture-caret-2-3"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7066256" data-course-id="957106" data-lecture-id="5944750" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview"
            data-purpose="preview-course">
            <span class="preview-text">Vista previa</span>
          </a>

          <span class="content-summary">
                                    13:04
                                </span>
        </div>
      </div>

    </div>
  </div><hr>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion3" href="#collapseThree">
               Perreo
           </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">

        <div class="panelclass="lecture-group" id="accordion2">
          <divcontainer class="panel" paneldata-default">purpose="lecture-item-2-4">
            <div class="panelclass="left-heading">content">
             <span <h4class="udi class="paneludi-title">play-circle"></span>
                <a data-toggle="collapse" data-parent="#accordion2"<div href="#collapseThreeOne">class="top">
           
            <div class="description Viejacollapse Escueladescription-957106-2-4">
                   <p>En </a>
este video verás como declarar arrays y hacer uso de ellos a través del <índice</h4>p>
            </div>
            <div id="collapseThreeOne" class="panel-collapse collapse">
              <div class="chapters">
                <ul class="view">
                  <li>
                    <a class="rows" href="video.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>

            <div class="title">

              Arrays

                  <li>
                    <a class="rows" href="video2.mp4">
                   <i class="udi udi-caret-down <divdown-arrow" class="play"><imgdata-toggle="collapse" src="http://www.murata.com/images/icons/moonicons/moonicondata-playtarget=".png"></div>
                      <div class="videodescription-title">audio video audio video audio video</div>
                      <div class="view957106-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>
               2-4" <data-purpose="lecture-caret-2-4"></ul>i>
              </div>
            </div>
          </div>
        </div>

        <div class="panelclass="details">

 panel         <span class="content-default">summary">
            <div class="panel-heading">                       08:40
              <h4 class="panel-title">                 </span>
        </div>
      </div>

  <a data   <hr>


      <div class="lecture-toggle="collapse"container " data-parent="#accordion2"purpose="lecture-item-2-5">
 href="#collapseThreeTwo">       <div class="left-content">
    
       <span class="udi udi-play-circle"></span>
        Playero  <div class="top">

            </a><div class="description collapse description-957106-2-5">
              <<p>En este video verás como crear una matriz y acceder a cada una de las posiciones de ésta</h4>p>
            </div>
            <div id="collapseThreeTwo" class="panel-collapse collapse">
              <div class="chapters">
                <ul class="view">
                  <li>
                    <a class="rows" href="video.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>

                    </a>
                 <div </li>class="title">

              Matrices


                  <li>
                    <a class="rows" href="video2.mp4">
                   <i class="udi udi-caret-down <divdown-arrow" class="play"><imgdata-toggle="collapse" src="http://www.murata.com/images/icons/moonicons/moonicondata-playtarget=".png"></div>
                      <div class="videodescription-title">audio video audio video audio video</div>
                      <div class="view957106-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>
               2-5" <data-purpose="lecture-caret-2-5"></ul>i>
              </div>
            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    07:34
                                </span>
        </div>
      </div>
    </div>
  </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-6">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-6">
              <p>En este video veras como funciona el condicional if - else, ademas de la explicación de operadores de comparación</p>
            </div>

            <div class="title">

              if y operadores de comparación


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-6" data-purpose="lecture-caret-2-6"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    11:57
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-7">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-7">
              <p>En este video veremos operadores de calculo y sus abreviaturas para trabajar con los datos de las variables</p>
            </div>

            <div class="title">

              Operadores de cálculos


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-7" data-purpose="lecture-caret-2-7"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    08:43
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-8">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-8">
              <p>En este video veras&nbsp;operadores booleanos and y or</p>
            </div>

            <div class="title">

              Operadores lógicos


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-8" data-purpose="lecture-caret-2-8"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    12:12
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-9">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-9">En este video verás como usar Switch con case, default y break</div>

            <div class="title">

              Switch


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-9" data-purpose="lecture-caret-2-9"></i>

            </div>
          </div>
        </div>

        <div class="details">

Bueno, les explico, este acordeon es el de bootstrap, como podran ver no utiliza nada de javascrip, solo el bootstrap.js y bootstrap.css y jquery.js, se usa la propiedad collapse de bootstrap, y entonces todo es base a ID, al hacer collapse de un acordeon con X id, se oculta, y se muestra otro ID. Y siempre se conserva tus estilos y el responsive de lo que ya tenias, te puse varias formas en los que puedes ordenar los accordeones, all ilo podrias acomodar a tu gusto. En la parte que dice bachata estan los detalles que puedes agregar a cada video, si los dettalles estan vacios no se muestra nada como en los otros incisos.

Si no te gusta que salga la palabra "Detalles" puedes aplicar algun icono o algo parecido.

Espero te sirva, y cumpla tus requerimientos, saludos.

.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover {
  background: #f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items: center;
  /*justify-content:space-between;*/
}

.play {
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width: 60%;
  white-space: normal !important;
}

.view-preview,
.length {
  color: #000;
  text-align: center;
}

.view-preview {
  width: 23%;
}

.length {
  width: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-group" id="accordion1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                   Videos Clasicos
               </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="chapters">
        <ul class="view">
          <li>
            <a class="rows" href="video.mp4">
              <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
              <div class="video-title">audio video audio video audio video</div>
              <div class="view-preview">&nbsp;Vista Previa</div>
              <div class="length">&nbsp;02:34</div>
            </a>
          </li>
          <li>
            <a class="rows" href="video2.mp4">
              <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
              <div class="video-title">audio video audio video audio video</div>
              <div class="view-preview">&nbsp;Vista Previa</div>
              <div class="length">&nbsp;02:34</div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
            Bachata
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">

        <div class="collapse-group" id="#accordion2">
          <div class="chapters">
            <ul class="view">
              <li>
                <a class="rows" href="video.mp4">
                  <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                  <div class="video-title">audio video audio video audio video</div>
                  <div class="view-preview">&nbsp;Vista Previa</div>
                  <div class="length">&nbsp;02:34</div>
                  <p><a data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoOne">Detalles &raquo;</a></p>
                  <p class="collapse" id="collapseTwoOne">La descripcion de tu video</p>
                </a>
              </li>



              <li>
                <a class="rows" href="video2.mp4">
                  <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                  <div class="video-title">audio video audio video audio video</div>
                  <div class="view-preview">&nbsp;Vista Previa</div>
                  <div class="length">&nbsp;02:34</div>
                </a>
              </li>
              <p><a style="margin-left: 1%;" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoTwo">Detalless &raquo;</a></p>
              <p style="margin-left: 1%;" class="collapse" id="collapseTwoTwo">La descripcion de tu segundo video</p>
            </ul>
          </div>

        </div>

      </div>

    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion3" href="#collapseThree">
               Perreo
           </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">

        <div class="panel-group" id="accordion2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne">
                        Vieja Escuela
                    </a>
              </h4>
            </div>
            <div id="collapseThreeOne" class="panel-collapse collapse">
              <div class="chapters">
                <ul class="view">
                  <li>
                    <a class="rows" href="video.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>



                  <li>
                    <a class="rows" href="video2.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo">            
                 Playero
            </a>
              </h4>
            </div>
            <div id="collapseThreeTwo" class="panel-collapse collapse">
              <div class="chapters">
                <ul class="view">
                  <li>
                    <a class="rows" href="video.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>

                    </a>
                  </li>



                  <li>
                    <a class="rows" href="video2.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</div>

Es solo un ejemplo de todo el codigo que deberas de escribir. Puedes explorarlo, lleva bootstrap por diseño, y el css esta en links externos

<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/course-landing-page/desktop/hb.6e1c07383f3a2a838d7c2eb9668cb7f1.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/entry-main.314642c6da280521a2420a4b39ddf9fa.css" rel="stylesheet" />
<link href="https://www.udemy.com/staticx/udemy/js/webpack/v5/entry-main.314642c6da280521a2420a4b39ddf9fa.css" rel="stylesheet" />
<div class="col-xxs-8 left-col">
  <div class="clp-component-render">
 
    <div user-tracker-in-viewport="" data-user-tracker-page="clp" data-user-tracker-schema="clp-activity">
      <div data-user-tracker-object-id="957106" data-user-tracker-action="seen-curriculum">
      </div>
    </div>
 
    <div class="curriculum-wrapper" data-purpose="course-curriculum" curriculum-loader="" data-course-id="957106" data-course-preview-path="/957106/preview/" data-num-displayed-items="10" data-has-more-to-load="1">

      <span id="curriculum" class="in-page-offset-anchor" style="top: -88px;"></span>

      <div class="curriculum-header-container">
        <div class="header-left">
          <div class="curriculum-header-title">

            Programa de este curso

          </div>
        </div>

        <div class="header-right">
          <span class="js-toggle-all">
                        
                            <div class="collapsed-text">
                                <a class="sections-toggle" user-tracker-click="" data-user-tracker-schema="action-logs" data-user-tracker-object-id="957106" data-user-tracker-action="full-curriculum-read" data-user-tracker-user-id="">
                                    Ampliar todo
                                </a>
                            </div>
                            <div class="expanded-text">
                                <a class="sections-toggle">
                                    Contraer todo
                                </a>
                            </div>
                            <div class="num-lectures">
                                274 clases
                            </div>
                        
                    </span>
          <span class="curriculum-header-length">
                        40:14:12
                    </span>
        </div>

      </div>


      <div class="content-container">
        <div class="section-container" data-toggle="collapse" data-target=".lecture-957106-1">
          <div class="section-header-left">
            <span class="lecture-title">
                            <div class="lecture-title-toggle-wrapper">
                                <span class="lecture-title-toggle js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">
                                    <span class="lecture-title-toggle-plus">+</span>
            <span class="lecture-title-toggle-minus">–</span>
            </span>
          </div>
          <span class="lecture-title-text">Introducción</span>
          </span>
        </div>
        <div class="section-header-right">
          <span class="num-sections js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">
                            
                                2 clases
                            
                        </span>
          <span class="section-header-length">
                            05:58
                        </span>
        </div>
      </div>
      <div class="lectures-container js-curriculum-collapse lecture-957106-1 collapse in" aria-expanded="true" style="">

        <div class="lecture-container  lecture-container--preview " data-purpose="lecture-item-1-1">
          <div class="left-content">
            <span class="udi udi-play-circle"></span>
            <div class="top">

              <div class="description collapse description-957106-1-1">
                <p>Introducción al curso de Desarrollo de Aplicaciones y Juegos para Android con una visión global del contenido&nbsp;</p>
              </div> 

              <div class="title">

                <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7072582" data-course-id="957106" data-lecture-id="5722726" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview">
                                                Introducción
                                            </a>


                <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-1-1" data-purpose="lecture-caret-1-1"></i>

              </div>
            </div>
          </div>

          <div class="details">

            <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7072582" data-course-id="957106" data-lecture-id="5722726" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview"
              data-purpose="preview-course">
              <span class="preview-text">Vista previa</span>
            </a>

            <span class="content-summary">
                                    02:20
                                </span>
          </div>
        </div>

        <hr>


        <div class="lecture-container " data-purpose="lecture-item-1-2">
          <div class="left-content">
            <span class="udi udi-play-circle"></span>
            <div class="top">

              <div class="description collapse description-957106-1-2">
                <p>Aquí te explicaré como está estructurado el curso, qué temas tratará cada tutor y cómo beneficiarte plenamente de todo el material que se ha preparado para ti</p>
              </div>

              <div class="title">

                Como seguir este curso


                <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-1-2" data-purpose="lecture-caret-1-2"></i>

              </div>
            </div>
          </div>

          <div class="details">

            <span class="content-summary">
                                    03:38
                                </span>
          </div>
        </div>


      </div>
    </div>

    <div class="content-container">
      <div class="section-container" data-toggle="collapse" data-target=".lecture-957106-2">
        <div class="section-header-left">
          <span class="lecture-title">
                            <div class="lecture-title-toggle-wrapper">
                                <span class="lecture-title-toggle js-curriculum-collapse collapse lecture-957106-2 ">
                                    <span class="lecture-title-toggle-plus">+</span>
          <span class="lecture-title-toggle-minus">–</span>
          </span>
        </div>
        <span class="lecture-title-text">Introducción a Java</span>
        </span>
      </div>
      <div class="section-header-right">
        <span class="num-sections js-curriculum-collapse collapse lecture-957106-2 ">
                            
                                15 clases
                            
                        </span>
        <span class="section-header-length">
                            02:19:20
                        </span>
      </div>
    </div>
    <div class="lectures-container collapse js-curriculum-collapse lecture-957106-2 ">

      <div class="lecture-container " data-purpose="lecture-item-2-1">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-1">
              <p>Aprender java puede ser fácil y divertido. Con este tutorial te introducirás en la programación en Java.</p>
              <p><br></p>
              <p><br></p>
            </div>

            <div class="title">

              Introducción a Java


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-1" data-purpose="lecture-caret-2-1"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    04:24
                                </span>
        </div>
      </div>
 
      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-2">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-2">
              <p>Normas de sintaxis que debes cumplir en Java para que tu código pueda ejecutarse</p>
            </div>

            <div class="title">

              Sintaxis en Java


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-2" data-purpose="lecture-caret-2-2"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    06:07
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container  lecture-container--preview " data-purpose="lecture-item-2-3">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-3">En este video veras ejemplos de las variables mas basicas de Java para los tipos de datos más usados</div>

            <div class="title">

              <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7066256" data-course-id="957106" data-lecture-id="5944750" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview">
                                                Variables
                                            </a>


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-3" data-purpose="lecture-caret-2-3"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <a open-modal="" href="javascript:void(0)" data-template-url="/957106/preview/?startPreviewId=7066256" data-course-id="957106" data-lecture-id="5944750" course-impression-tracker="" data-additional-class="generic-modal--previews-video" data-tracking-type="lecture-preview"
            data-purpose="preview-course">
            <span class="preview-text">Vista previa</span>
          </a>

          <span class="content-summary">
                                    13:04
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-4">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">
 
            <div class="description collapse description-957106-2-4">
              <p>En este video verás como declarar arrays y hacer uso de ellos a través del índice</p>
            </div>

            <div class="title">

              Arrays


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-4" data-purpose="lecture-caret-2-4"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    08:40
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-5">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-5">
              <p>En este video verás como crear una matriz y acceder a cada una de las posiciones de ésta</p>
            </div>

            <div class="title">

              Matrices


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-5" data-purpose="lecture-caret-2-5"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    07:34
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-6">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-6">
              <p>En este video veras como funciona el condicional if - else, ademas de la explicación de operadores de comparación</p>
            </div>

            <div class="title">

              if y operadores de comparación


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-6" data-purpose="lecture-caret-2-6"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    11:57
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-7">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-7">
              <p>En este video veremos operadores de calculo y sus abreviaturas para trabajar con los datos de las variables</p>
            </div>

            <div class="title">

              Operadores de cálculos


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-7" data-purpose="lecture-caret-2-7"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    08:43
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-8">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-8">
              <p>En este video veras&nbsp;operadores booleanos and y or</p>
            </div>

            <div class="title">

              Operadores lógicos


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-8" data-purpose="lecture-caret-2-8"></i>

            </div>
          </div>
        </div>

        <div class="details">

          <span class="content-summary">
                                    12:12
                                </span>
        </div>
      </div>

      <hr>


      <div class="lecture-container " data-purpose="lecture-item-2-9">
        <div class="left-content">
          <span class="udi udi-play-circle"></span>
          <div class="top">

            <div class="description collapse description-957106-2-9">En este video verás como usar Switch con case, default y break</div>

            <div class="title">

              Switch


              <i class="udi udi-caret-down down-arrow" data-toggle="collapse" data-target=".description-957106-2-9" data-purpose="lecture-caret-2-9"></i>

            </div>
          </div>
        </div>

        <div class="details">
Origen Enlace
Alvarez
  • 4k
  • 4
  • 18
  • 39

Bueno, les explico, este acordeon es el de bootstrap, como podran ver no utiliza nada de javascrip, solo el bootstrap.js y bootstrap.css y jquery.js, se usa la propiedad collapse de bootstrap, y entonces todo es base a ID, al hacer collapse de un acordeon con X id, se oculta, y se muestra otro ID. Y siempre se conserva tus estilos y el responsive de lo que ya tenias, te puse varias formas en los que puedes ordenar los accordeones, all ilo podrias acomodar a tu gusto. En la parte que dice bachata estan los detalles que puedes agregar a cada video, si los dettalles estan vacios no se muestra nada como en los otros incisos.

Si no te gusta que salga la palabra "Detalles" puedes aplicar algun icono o algo parecido.

Espero te sirva, y cumpla tus requerimientos, saludos.

.chapters {
  width: 100%;
  background-color: white;
  border-left: 1px solid rgb(230, 230, 230);
  border-right: 1px solid rgb(230, 230, 230);
  border-bottom: 1px solid rgb(230, 230, 230);
}

.view {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

.view li {
  padding: .5% 1%;
  border-top: 1px solid rgb(230, 230, 230);
}

.view li:hover {
  background: #f9f9f9;
}

.rows {
  text-decoration: none;
  display: flex;
  align-items: center;
  /*justify-content:space-between;*/
}

.play {
  padding-right: 10px;
  /*align-self:center;*/
}

.video-title {
  width: 60%;
  white-space: normal !important;
}

.view-preview,
.length {
  color: #000;
  text-align: center;
}

.view-preview {
  width: 23%;
}

.length {
  width: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-group" id="accordion1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
                   Videos Clasicos
               </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="chapters">
        <ul class="view">
          <li>
            <a class="rows" href="video.mp4">
              <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
              <div class="video-title">audio video audio video audio video</div>
              <div class="view-preview">&nbsp;Vista Previa</div>
              <div class="length">&nbsp;02:34</div>
            </a>
          </li>
          <li>
            <a class="rows" href="video2.mp4">
              <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
              <div class="video-title">audio video audio video audio video</div>
              <div class="view-preview">&nbsp;Vista Previa</div>
              <div class="length">&nbsp;02:34</div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
            Bachata
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">

        <div class="collapse-group" id="#accordion2">
          <div class="chapters">
            <ul class="view">
              <li>
                <a class="rows" href="video.mp4">
                  <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                  <div class="video-title">audio video audio video audio video</div>
                  <div class="view-preview">&nbsp;Vista Previa</div>
                  <div class="length">&nbsp;02:34</div>
                  <p><a data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoOne">Detalles &raquo;</a></p>
                  <p class="collapse" id="collapseTwoOne">La descripcion de tu video</p>
                </a>
              </li>



              <li>
                <a class="rows" href="video2.mp4">
                  <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                  <div class="video-title">audio video audio video audio video</div>
                  <div class="view-preview">&nbsp;Vista Previa</div>
                  <div class="length">&nbsp;02:34</div>
                </a>
              </li>
              <p><a style="margin-left: 1%;" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseTwoTwo">Detalless &raquo;</a></p>
              <p style="margin-left: 1%;" class="collapse" id="collapseTwoTwo">La descripcion de tu segundo video</p>
            </ul>
          </div>

        </div>

      </div>

    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion3" href="#collapseThree">
               Perreo
           </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">

        <div class="panel-group" id="accordion2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne">
                        Vieja Escuela
                    </a>
              </h4>
            </div>
            <div id="collapseThreeOne" class="panel-collapse collapse">
              <div class="chapters">
                <ul class="view">
                  <li>
                    <a class="rows" href="video.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>



                  <li>
                    <a class="rows" href="video2.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo">            
                Playero
            </a>
              </h4>
            </div>
            <div id="collapseThreeTwo" class="panel-collapse collapse">
              <div class="chapters">
                <ul class="view">
                  <li>
                    <a class="rows" href="video.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>

                    </a>
                  </li>



                  <li>
                    <a class="rows" href="video2.mp4">
                      <div class="play"><img src="http://www.murata.com/images/icons/moonicons/moonicon-play.png"></div>
                      <div class="video-title">audio video audio video audio video</div>
                      <div class="view-preview">&nbsp;Vista Previa</div>
                      <div class="length">&nbsp;02:34</div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

</div>