What is a promise in Javascript?

Question

J. Mick

Asked: 2020-08-29 07:33:36 +0800 CST 2020-08-29 07:33:36 +0800 CST 2020-08-29 07:33:36 +0800 CST

How to adapt an expand/accordion and add new effects - jQuery?

772

I have the list of links, of the index of 100% responsive videos adapted to the help of Risa__B .

In my previous question it was a big problem to adapt it, even though it was only a few small changes to the stylescss

I don't want the responsive adaptation to get lost and return to the same old problem, but that's not the problem for this purpose.

To the list of videos I want to be able to add an Expand to show and hide the contents as can be seen in the image in - Section 1 and add the same effect, one could say, by adding a description to each of the videos, which is Activate an arrow when a video contains a description and if there is no description, do not show the arrow.

Example:

How could I add the same functionality of the image example, to my video listing?

.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: 1.2em;
}

.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%;
}

<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>

3 Answers

Voted

Alvarez · Answer 1 · 2020-08-31T22:47:04+08:00

Well, this time if I hope it is what you need, I managed to get an easier Jquey function, enjoy it: The jquery what checks if it is a child, if so it shows it. and the css was just styling.

Greetings.

$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.next().slideUp(350);
  } else {
    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});

.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: 1.2em;
}

.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%;
}

@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  font-size: 1.1em;
  margin: 1em 0;
}

.description {
  margin: 1em auto 2.25em;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  /*display: block;*/
}

ul li {
  margin: .5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.label:empty {
  display: none;
}

span {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Clasicas</a>
    <ul class="inner">
      <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 href="javascript:void(0);"></a><span class="toggle label label-danger ">+</span>
              <ul class="inner">
                <li>Detalles del video</li>
              </ul>
            </a>
          </li>
          </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>
  </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Rancheras</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Banda</a>
        <div class="inner">
          <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 href="javascript:void(0);"></a><span class="toggle label label-danger ">+</span>
                  <ul class="inner">
                    <li>Detalles del video</li>
                  </ul>
                </a>
              </li>
              </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>
  </li>

  <li>Option 3</li>
  </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Romanticas</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Técnicamente cualquier número de elementos anidados</a>
        <ul class="inner">
          <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 href="javascript:void(0);"></a><span class="toggle label label-danger ">+</span>
                  <ul class="inner">
                    <li>Detalles del video</li>
                  </ul>
                </a>
              </li>
              </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>
      </ul>
  </li>

  <li>Option 2</li>

  <li>Option 3</li>
  </ul>
  </li>
</ul>

Alvarez · Answer 2 · 2020-09-01T20:51:26+08:00

Everything would have been easier if you had shared that link before.

I think it does not need explanations because they are above, there were only some changes in the Css and when we click to show more details.

Enjoy it, greetings from Honduras.

$('.accordion').click(function(e) {
  e.preventDefault();
  var $this = $(this);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.removeClass("active");
    $this.next().slideUp(350);
  } else {
    $this.addClass("active");

    $this.parent().parent().find('.panel').removeClass('show');
    $this.parent().parent().find('.panel').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});


$('.toggle').click(function(e) {
  e.preventDefault();

  var $this = $(this);

  if ($this.next().hasClass('show')) {
    $this.next().removeClass('show');
    $this.removeClass("active");

    $this.next().slideUp(350);
  } else {
    $this.addClass("active");

    $this.parent().parent().find('li .inner').removeClass('show');
    $this.parent().parent().find('li .inner').slideUp(350);
    $this.next().toggleClass('show');
    $this.next().slideToggle(350);
  }
});

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  font-size: 1.1em;
  margin: 1em 0;
}

.description {
  margin: 1em auto 2.25em;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  /*display: block;*/
}

ul li {
  margin: .5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

.toggle:after {
  content: '\002B';
}

.toggle.active:after {
  content: "\2212";
}

.label:empty {
  display: none;
}

span {
  cursor: pointer;
}

.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%;
}

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2212";
}

div.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: none;
}

.toogle {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Me acabo de tomar Dos Cervezas haciendo esto</h2>
<h2>Me debes dos cervezas y los puntos de recompensa</h2>

<button class="accordion">Cervezas</button>
<div class="panel">
  <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<span class="toggle"> </span>
            <ul class="inner">
              <li>Detalles del video</li>
            </ul>
          </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>

<button class="accordion">Ahora Vodka</button>
<div class="panel">
  <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<span class="toggle"> </span>
            <ul class="inner">
              <li>Detalles del video</li>
            </ul>
          </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>

<button class="accordion">Para terminar Ron Zacapa</button>
<div class="panel">
  <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<span class="toggle"> </span>
            <ul class="inner">
              <li>Detalles del video</li>
            </ul>
          </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>

Alvarez · Answer 3 · 2020-08-31T14:28:47+08:00

It's just an example of all the code you'll need to write. You can explore it, it has bootstrap by design, and the css is in external links

<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">

How to adapt an expand/accordion and add new effects - jQuery?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?