Lou's questions

I was looking for an editor, something simple and I came across the following question:

• How to view/display and edit HTML code?

I am using the same adapting to my administration system.

But there are some problems , including the following:

• In each tab that is provided, the code is generated with a divwrapper type and the paragraphs in brlike this:

• And on the other hand, every time you copy and paste something into the editor, it copies the formatting from wherever you copied it.

So, how to avoid the use of divas a container and, avoid the paragraphs in br? Instead of them, let them be replaced, just by pand in an organized way, for example:

How can I fix these editor flaws?

• A JSFiddle : https://jsfiddle.net/p87t0aqx/

Full code:

$(function() {
  $('#editControls a').click(function(e) {
    switch($(this).data('role')) {
      case 'p':
        document.execCommand('formatBlock', false, $(this).data('role'));
        break;
      //Specific control for the code button.
      case 'code':
        //enable / disable code mode
        codeMode = !codeMode;
        if(codeMode) {
          // ON: show the code in text mode
          htmlDiv.text(htmlDiv.html());
          //
          var editor = $("#editor")
          editor.addClass("black-bg-colr codeMode")
        } else {
          // OFF: reinterpret the code
          htmlDiv.html(htmlDiv.text());
          var editor = $("#editor")
          editor.removeClass("black-bg-colr codeMode")
        }
        break;
      default:
        document.execCommand($(this).data('role'), false, null);
      break;
    }
  });

  //code mode control
  let codeMode = false;
  let htmlDiv = $("#editor");

  //input -> NOT keyup
  htmlDiv.on("input", function(e) {
  //htmlDiv.on("keyup", function(e) {
    $(".editor-preview").val(htmlDiv.html());
    //$("#textarea").html(htmlDiv.html());
    $(".editor-preview").keyup();
    //$(".editor-preview").html(htmlDiv.html());
  });
  //$("#textarea").html(htmlDiv.html());

  $('.editor-preview').keyup(function(){
    //var value = $(this).val();
    var contentAttr = $(this).attr( 'class' );
    if (!codeMode) {
      var value = $(this).val();
      //$( '.' + contentAttr + '' ).html(value);
      $( '.' + contentAttr).html(value);
    } else {
      //$( '.' + contentAttr + '' ).html(htmlDiv.text());
      $( '.' + contentAttr).html(htmlDiv.text());
    }
  });
});

#editControls {
    overflow: auto;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-color: silver;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: .5em 1em .5em 1em;
    background-color: #fbfbfb;
    margin: 0 auto;
    width: 100%; /*90*/
}
#editor {
    resize: vertical;
    overflow: auto;
    border: 1px solid silver;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    padding: 1em;
    background: white;
    margin: 0 auto;
    width: 100%;/*90*/
}
#editor:focus { 
    outline: none !important;
    box-shadow: inset 0 0 2px silver;
}
.codeMode {
    font-family:Courier New,Source Code Pro Light,Medium,Source Code Pro ExtraLight,Menlo,Consola,Monaco Linux,Consola Regular,Fira Code Regular,DejaVu Sans Mono;
    /*font-family: inherit;*/
    /*font-family: 'Courier New';*/
    border: 0px;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    line-height: inherit;
    vertical-align: baseline;
    box-sizing: inherit;
    color: #fff;
}
.black-bg-colr {
  background-color: #000 !important;
}
.btn-group {
    position: relative;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.btn-group+.btn-group {
    margin-left: 5px;
}
.btn-group a {
    text-decoration: none;
}
.btn-editor {
    height: 30px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    border: 1px solid transparent;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-group>.btn-editor:first-child {
    margin-left: 0;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
}
.btn-group>.btn-editor+.btn-editor {
    margin-left: -1px !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-not-space{
    position: relative;
    float: left;
    margin-left: 0 !important;
    border-radius: inherit;
    border: 1px solid transparent;
    border-color: #ccc;
}
.btn-editor.btn-not-space:hover {
    background-color: rgba(230, 230, 230, 0.32);
}
#preview {
    padding: 1em;
    margin: 0 auto;
    width: 97%;
    border-top: 1px dotted #c8ccd0;
    border-bottom: 1px dotted #c8ccd0;
    clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="editor-wrapper">
  <div id="editControls">
    <div class="btn-group">
      <a class="btn-editor btn-not-space" data-role="bold" data-ref="#"><b>Bold</b></a>
      <a class="btn-editor btn-not-space" data-role="italic" data-ref="#"><em>Italic</em></a>
      <a class="btn-editor btn-not-space" data-role="underline" data-ref="#"><u><b>U</b></u></a>
      <a class="btn-editor btn-not-space" data-role="strikeThrough" data-ref="#"><strike>abc</strike></a>
    </div>
    <div class="btn-group">
      <a class="btn-editor btn-not-space" data-role="code" data-ref="#"><code>&lt;/&gt;</code></a>
    </div>
  </div>
  <div id="editor" contenteditable></div>
  <textarea id="textarea" name="detail" class="editor-preview" style="display: none;"></textarea>
  <div id="preview" class="editor-preview"></div>
</div>

The detail of the content or product where I show all the information from my tablecontenido

id_contenido    contenido    title    image    author    detail    url     show_temary    active

and from it I can directly hide the chapters this would be as private content and, I control it from this point show_temarywhere if it has the value of yesthe chapters are shown.

if($show_temary ==="yes") {
    //Muestro los capítulos para usuarios registrados o otra cosa para usuarios no registrados
}

Now for users registered as a demo account, a new column called show_chaptersthe table was created chapterswhere if the value is yes, that chapter is enabled. Well here I can solve it using the same content or product detail control.

id_chapters    chapters    id_contenido    show_chapters

But my biggest problem is that he wanted to show the chapters and also the content that they cover within the chapters as the days or weeks go by in that way that the chapters and content are enabled, but according to the type of account.

And, my users table is made up as follows.

id_user    first_name    last_name    referred    account_type    premium_user    username    email    password    profile    logindatetime    log_in    email_code    expiry_code    active 

And, my code is

function PlayerList(){
    global $id_contenido;
    global $conexion;

    $active = 1;
    $show_chapters = "yes";

    $stmt = $conexion->prepare("SELECT id_chapters,chapters FROM chapters WHERE id_contenido=? AND show_chapters=?");
    $stmt->bind_param("is",$id_contenido,$show_chapters);
    $stmt->execute();
    $stmt->store_result();

    if ($stmt->num_rows>0) {
        $stmt->bind_result($id_chapters, $chapters);

        while ($stmt->fetch()) {
            echo '<h1 class="chapters-player">'.$chapters.'</h1>';

            $stmtA = $conexion->prepare("SELECT title_video,file_type_format,multimedia,detail_format_text,url_website FROM videos WHERE id_contenido=? AND id_chapters=? AND active=?");
            $stmtA->bind_param("iii",$id_contenido,$id_chapters,$active);
            $stmtA->execute();
            $stmtA->store_result();

            if ($stmtA->num_rows>0) {
                $stmtA->bind_result($title_video, $file_type_format,$multimedia,$detail_format_text,$url_website);

                while ($stmtA->fetch()) {

                }

            } else {
                echo 'Estamos trabajando para el próximo cápitulo';
            }
        }
    } else {
        echo 'En estos momentos estamos actualizando el contenido más reciente de este cápitulo.';
    }
}

I have managed to advance in certain things mentioned, but I would like to be able to enable the chapters and contents according to the date, controlling said action according to the type of account, can you explain to me how to do it.

I received a message that they could not register on my website and, analyzing each element one by one, I realize that what causes the error is the following:

<input type="checkbox" id="brand1" name="agree">
<label for="brand1"><span></span>He leído y acepto los Términos de uso y Política de Privacidad</label>

Ajax response from my custom messages in PHP

if (isset($_POST['DataForm'])) {
        $first_name = $_POST['first_name'];
        $agree = $_POST['agree'];

        if (empty($_POST['first_name'])) {
            echo json_encode(['status'=> false, 'message'=>"<strong>Por favor, ingresé su nombre.</strong>"]);
            exit;
        }
        if (empty($_POST['agree'])){
            echo json_encode(['status'=> false, 'message'=>"<strong>Debes aceptar los terminos de uso/condiciones, politica de privacidad para continuar.</strong>"]);
            exit;
        }
}

I have to comment the following:

//$agree = $_POST['agree'];

For the form submission to work, it worked fine before, when the user did not select accept, ajax issued the following message:

You must accept the terms of use/conditions, privacy policy to continue

Because this happens, PHP in its new version no longer detects the:

<input type="checkbox" id="brand1" name="agree">

In this way:

$agree = $_POST['agree'];

In the meantime, with a solution add the following message:

By registering you agree to the terms of use and privacy policy

My code works by default only with the file formatMP4

Note: My code is adapted to work with theplugin player video.js

function insertar_contenido(vid,elemento){
    var contenido, fuente
    var url = elemento.attr("href")
    var ext = "mp4"
    var formato = ext
    var es_video = new RegExp("^.+\\."+ext+"$").test(url)
    var cargando = $('.loading')
    function mostrar(){cargando.fadeIn(200)}
    function ocultar(){cargando.fadeOut(100)}
    mostrar()
    var cuadro = vid.find(".cuadro")
    if(cuadro.length!=0){
        $("#ocultado").append(cuadro)
    }
    if(es_video){
        var json = {"controls": true, "autoplay": false, "preload": "auto", "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2]};
        contenido = $(document.createElement("video"))
        fuente = $(document.createElement("source"))
        fuente.attr("src",url)


        fuente.attr("type","video/"+formato)


        contenido.attr("class","video-js vjs-default-skin")
        contenido.attr('data-setup', JSON.stringify(json));
    } else {
        //
    }
}

I need to be able to use other types of formats such as: mp3, mp4, m3u8, ts, video YouTubeamong others.

So according to the file extension add the video type format, for example:

if(var ==="mp4"){
     fuente.attr("type","video/mp4")
}elseif(var === "m3u8"){
     fuente.attr("type","application/x-mpegURL")
}

I have the following idea, I don't know if it's correct and I think it's not because it doesn't give results:

function insertar_contenido(vid,elemento){
    var ext = "mp4, mp3, mpeg, m3u8" //Entre otros
}

if(es_video){

    if(var ==="mp4"){
         fuente.attr("type","video/mp4")
    }elseif(var === "m3u8"){
         fuente.attr("type","application/x-mpegURL")
    }
}

Perhaps if it had been in it PHPwould have been successful.

I know very little about JavaScript / jQuery, could you explain me how to achieve this goal please?

I was searching the web for an example to redirect everything without wwwand found the following:

RewriteEngine On

# Follow symbolic links.
Options +FollowSymLinks

RewriteCond %{HTTP_HOST} !^$
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L,NE]

# Prevent directory listings
Options All -Indexes

I don't know exactly what it does Options All -Indexes Options +FollowSymLinksand trying with some examples without success.

But it does not work, I can enter without problems and, it does not redirect me tohttps

What I want to achieve, is that if you enter my website like this:

www.example.com/
example.com/
o
http://www.example.com/
http://example.com/

Always redirect to:

https://example.com/

no use ofwww

I am updating my website in the most current changes guiding me in the changes and replacing $(function() {});by $(document).ready(function()but my menu scroll does not work the animation in the version 3.3.1of jQuerythe current animation or my code works with the version2.1.3 https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

$(function() {
		$('a[href*=#]').bind('click', function(e) {
				e.preventDefault(); // prevent hard jump, the default behavior

				var target = $(this).attr("href"); // Set the target as variable

				// perform animated scrolling by getting top-position of target-element and set it as scroll target
				$('html, body').stop().animate({
						scrollTop: $(target).offset().top
				}, 600, function() {
						location.hash = target; //attach the hash (#jumptarget) to the pageurl
				});

				return false;
		});
});

$(window).scroll(function() {
		var scrollDistance = $(window).scrollTop();

		// Show/hide menu on scroll
		//if (scrollDistance >= 850) {
		//		$('nav').fadeIn("fast");
		//} else {
		//		$('nav').fadeOut("fast");
		//}
	
		// Assign active class to nav links while scolling
		$('.page-section').each(function(i) {
				if ($(this).position().top <= scrollDistance) {
						$('.navigation a.active').removeClass('active');
						$('.navigation a').eq(i).addClass('active');
				}
		});
}).scroll();

* {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  transition: all .1s ease;
}

html, body {
  height: 100%;
}

h1 {
  font-size: 64px;
}

.page-section {
  height: 480px;
  width: 50%;
  margin-left: 35%;
  margin-top: 5%;
  padding: 3em;
  background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
  color: white;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
}

.navigation {
  position: fixed;
  width: 30%;
  margin-left: 2%;
  background-color: #999;
  color: #fff;
}
.navigation__link {
  display: block;
  color: #ddd;
  text-decoration: none;
  padding: 1em;
  font-weight: 400;
}
.navigation__link:hover {
  background-color: #aaa;
}
.navigation__link.active {
  color: white;
  background-color: rgba(0, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'>

<nav class="navigation" id="mainNav">
			<a class="navigation__link" href="#aaa">Section 1</a>
			<a class="navigation__link" href="#bbb">Section 2</a>
			<a class="navigation__link" href="#ccc">Section 3</a>
			<a class="navigation__link" href="#ddd">Section 4</a>
				<a class="navigation__link" href="#eee">Section 5</a>
				<a class="navigation__link" href="#fff">Section 6</a>
				<a class="navigation__link" href="#7">Section 7</a>
</nav>

<div class="page-section hero" id="1">
			<h1>Smooth scroll, fixed jump menu with active class</h1>
</div>
<div class="page-section" id="aaa">
			<h1>Section Two</h1>
</div>
<div class="page-section" id="bbb">
			<h1>Section Three</h1>
</div>
<div class="page-section" id="ccc">
			<h1>Section Four</h1>
</div>
<div class="page-section" id="ddd">
			<h1>Section Five</h1>
</div>
<div class="page-section" id="eee">
			<h1>Section Six</h1>
</div>
<div class="page-section" id="fff">
			<h1>Section Seven</h1>
</div>

What changes should I consider, a bit confusing normally I use very simple and small things on jQuery I don't deepen its use.?

In the following demo template text is typed and then erased and then retyped with its respective typing cursor effect.

Managing to get the following effect using only jQuery:

$(document).ready(function(){
	var msg = 'Mensaje de prueba...';
	var k = 0;
	var char = 0;
	var output = $('#page-two');

	var app = {
		init: function(text, target){
			target.html('');
			char = text.length;
			this.sayHello(text, target);
		},
		sayHello: function(text, target){
			target.append(text[k]);
			console.log(k);
			if(k < char){
				var that = this;
				k++;
				var timer = setTimeout(function(){
					that.sayHello(text, target);
				}, 80);
			}
		}
	};
	app.init(msg, output);
});

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');

*{
	margin: 0;
	padding: 0;
	boz-sizing: border-box;
	font-family: "Open Sans", sans-serif
}
body{
	background: linear-gradient(135deg,#00C4FF,#9D1BB2);
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<section id="container">
		<div id="page-two"></div>
		<div class="clear"></div>
	</section>

How can I make it have the delete and rewrite effect with the respective write cursor just like the demo template ?

I have the following background color but I have to scale between the body -> <div class="background">and <div class="container">to get this result:

@import 'https://fonts.googleapis.com/css?family=Lato:300';

html, body, .background
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	background: white;
}

body
{
	background: linear-gradient(0deg, rgba(0, 0, 200, 0.6) , rgba(0, 0, 200, 0) );
}

.background
{
	background: linear-gradient(120deg, rgba(50, 150, 100, 0.6) , rgba(0, 0, 100, 0) );
}

.container
{
	background: linear-gradient(240deg, rgba(150, 50, 50, 0.6) , rgba(0, 0, 200, 0) );
	
    display: flex;
	flex-direction: column;
    align-items: center;
  	justify-content: center;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

h1
{
	color: white;
	font-weight: 100;
}

<div class="background">
	<div class="container">
		<h1>hello</h1>
	</div>
</div>

How can I get that same background color in a single style, that is, have that background in a single container, in one container divor another without having to add other elements to obtain the same result.

through my codePHP

    //Busca todas las categorías en referencia de un producto por ejemplo: Capitulo 1, Capitulo 2, Capitulo 3
    $stmtChapters = $con->prepare("SELECT id_chapters,chapters FROM chapters WHERE id_video=?");
    $stmtChapters->bind_param("i",$id_video);
    $stmtChapters->execute();
    $stmtChapters->store_result();

    if ($stmtChapters->num_rows>0) {
        $stmtChapters->bind_result($id_chapters, $chapters);
        while ($stmtChapters->fetch()) {
            echo '<h1 class="chapters-player">'.$chapters.'</h1>';

            //Obtenemos todo los contenidos en base a la categoria por ejemplo se muestran 10 vídeos o textos en el Capitulo 1 y así sucesivamente en los otros capítulos.
            $stmtVideos = $con->prepare("SELECT title_video,format,multimedia,detail,url_website FROM videos WHERE id_video=? AND id_chapters=? AND active=?");
            $stmtVideos->bind_param("iii",$id_video,$id_chapters,$active);
            $stmtVideos->execute();
            $stmtVideos->store_result();

            if ($stmtVideos->num_rows>0) {
                $stmtVideos->bind_result($title_video, $format,$multimedia,$detail,$url_website);
                $i = 1;
                $mNav='<div id="enlaces" class="videolist">';
                $mDivs='<div id="ocultado" style="display: none;">';
                while ($stmtVideos->fetch()) {

                    if($format === 'video') {
                        $mNav.='<a class="link" href="'.$multimedia.'">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                    }
                    if($format === 'html') {
                        $mNav.='<a class="link" href="'.$url_website.'">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                    }

                    if($format === 'text') {
                        $mNav.='<a class="link" id="link_'.$i.'" href="#">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                        $mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>';
                    }

                $i++;
                }
                $mDivs.='</div>';
                $mNav.='</div>';

                echo $mNav;
                echo $mDivs;

            } else {
                //
            }
        }
    } else {
        //
    }

I obtain the categories of the chapters and consequently also the products or the data linked to the chapter obtaining the following:

The exact problem I present is the following right in this part of the codePHP

                    if($format === 'text') {
                        $mNav.='<a class="link" id="link_'.$i.'" href="#">
                                    <div class="panel-video">
                                        <span class="play-title">'.$title_video.'</span>
                                    </div>
                                </a>';
                        $mDivs.='<div class="cuadro frame-scroll-multi-content" id="c_link_'.$i.'">'.$detail.'</div>';
                    }
                    $i++;

Because that part of code prints me the following:

<div class="list-scroll-video">
    <h1 class="chapters-player">Capitulo 1</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_1" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 1</span>
            </div>
        </a>
        <a class="link" id="link_2" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 2</span>
            </div>
        </a>
        <a class="link" id="link_3" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 3</span>
            </div>
        </a>
        <a class="link" id="link_4" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 4</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_1">   DATOS DE TEXTO 1    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_2">   DATOS DE TEXTO 2    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_3">   DATOS DE TEXTO 3    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_4">   DATOS DE TEXTO 4    </div>
    </div>

    <h1 class="chapters-player">Capitulo 2</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_1" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 5</span>
            </div>
        </a>
        <a class="link" id="link_2" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 6</span>
            </div>
        </a>
        <a class="link" id="link_3" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 7</span>
            </div>
        </a>
        <a class="link" id="link_4" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 8</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_1">   DATOS DE TEXTO 5    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_2">   DATOS DE TEXTO 6    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_3">   DATOS DE TEXTO 7    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_4">   DATOS DE TEXTO 8    </div>
    </div>

</div>

If you observe in Chapter 2 , the id is repeated in both <a class="link" id="link_1" href="#">( id="link_1") and div class="cuadro frame-scroll-multi-content" id="c_link_1"> DATOS DE TEXTO 1 </div>( id="c_link_1")

Repeating the numbers causes me a problem with the code jQuery, so to make it clearer, the result that I should and should get is the following:

<div class="list-scroll-video">
    <h1 class="chapters-player">Capitulo 1</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_1" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 1</span>
            </div>
        </a>
        <a class="link" id="link_2" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 2</span>
            </div>
        </a>
        <a class="link" id="link_3" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 3</span>
            </div>
        </a>
        <a class="link" id="link_4" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 4</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_1">   DATOS DE TEXTO 1    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_2">   DATOS DE TEXTO 2    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_3">   DATOS DE TEXTO 3    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_4">   DATOS DE TEXTO 4    </div>
    </div>

    <h1 class="chapters-player">Capitulo 2</h1>
    <div id="enlaces" class="videolist">
        <a class="link" id="link_5" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 5</span>
            </div>
        </a>
        <a class="link" id="link_6" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 6</span>
            </div>
        </a>
        <a class="link" id="link_7" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 7</span>
            </div>
        </a>
        <a class="link" id="link_8" href="#">
            <div class="panel-video">
                <span class="play-title">Texto 8</span>
            </div>
        </a>
    </div>

    <div id="ocultado" style="display: none;">
        <div class="cuadro frame-scroll-multi-content" id="c_link_5">   DATOS DE TEXTO 5    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_6">   DATOS DE TEXTO 6    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_7">   DATOS DE TEXTO 7    </div>
        <div class="cuadro frame-scroll-multi-content" id="c_link_8">   DATOS DE TEXTO 8    </div>
    </div>

</div>

Can you tell me what changes I should make to get that result.