I can’t get lines from the table

Asked

Viewed 71 times

2

I created a whole styling for the table I did everything in the first row of the table was ok, but when I went to duplicate this line I noticed that only in the first was styling, I’m starting in the area, if someone can give a help, I appreciate!

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
crossorigin="anonymous">


<body>
<style>    
.table thead tr th {
    text-align: center;
}    
.table tbody tr td{
    text-align: center;            
    vertical-align: middle;
}
.table tbody tr td.end{
    position: relative;
    width: 300px !important;        
  }            

</style>

<div class="container">

    <div class="col-md-10">
        <table class="table table-striped table-bordered ">
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Cliente</th>
                    <th>Localidade Cliente</th>
                    <th>Cidade/UF</th>
                    <th>Endereço</th>
                </tr>
            </thead>            

            <tbody>
                <tr>
                    <td>Ativo</td>
                    <td >Fulano de tal</td>
                    <td>Uberlandia</td>
                    <td >Uberlandia GO</td>
                    <td class="end">    
                            <div class="end_text">
                                É um fato conhecido de todos que um leitor 
se distrairá com o conteúdo de texto legível de uma página quando estiver 
examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma 
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo 
aqui", fazendo com que ele tenha uma aparência similar a de um texto 
legível. Muitos softwares de publicação e editores de páginas na internet 
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por ' 
lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias 
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às 
vezes de propósito (injetando humor, e coisas do gênero).                                    
                            </div>

                            <div class="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" class="glyphicon 
glyphicon-chevron-up"></i>    
                            </div>
                    </td>
                </tr>

                <tr>
                    <td>Ativo</td>
                    <td >Fulano de tal</td>
                    <td>Uberlandia</td>
                    <td >Uberlandia GO</td>
                    <td class="end">    
                            <div class="end_text">
                                É um fato conhecido de todos que um leitor 
se distrairá com o conteúdo de texto legível de uma página quando estiver 
examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma 
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo 
aqui", fazendo com que ele tenha uma aparência similar a de um texto 
legível. Muitos softwares de publicação e editores de páginas na internet 
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias 
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às 
vezes de propósito (injetando humor, e coisas do gênero).                                    
                            </div>

                            <div class="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
                                <i onclick="fechareabrir()" class="glyphicon 
glyphicon-chevron-up"></i>    
                            </div>
                    </td>
                </tr>

            </tbody>

        </table>
    </div>    


    </div>


<script type="text/javascript">    

    var end = document.querySelector('.end_text').textContent;            
    var fechado = true;        

    if(end.length > 120){        
        var end_novo = end.substring(0,120);        
         document.querySelector('.end_text').innerHTML = end_novo;
         document.querySelector('.icone').style.display = "block";
     }

    function fechareabrir(){
        if(fechado){
            abrir();
        }else{
            fechar();
        }
    }

    function abrir(){
        document.querySelector('.end_text').innerHTML = end;
        document.querySelector('.icone').style.display = "none";            
        document.querySelector('.icone2').style.display = "block";
        fechado = false;        
    }

    function fechar(){        
            var end_novo = end.substring(0,120);        
            document.querySelector('.end_text').innerHTML = end_novo;
            document.querySelector('.icone').style.display = "block";
            document.querySelector('.icone2').style.display = "none";
            fechado = true;        
    }


</script>


<!-- Latest compiled and minified JavaScript -->
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"></script>


</body>
</html>
javascript html5 css3
  • 1

    The second line is not getting the arrow?

  • 1

    does not display the icon and also does not call the substring function

  • 1

    You don’t use jQuery?

  • 1

    Very complicated your code. You can do it with pure Javascript, Although it is more complicated, but with jQuery would simplify a lot. Anyway, I think I would need to redesign this whole function structure.

  • 1

    I tried to make javascript as simple as possible because I’m starting on this, the first row of the column is all right only the error in the others when duplicate

  • 1

    Yes, it is because each element and class has an index.

  • 1

    hum then how do I get to put in the lines that will arise?

  • 1

    First thing is to use jQuery, it will facilitate 90% the work of rewriting your code.

Show 3 more comments

1 answer

2


You had an unexpected behavior on the line document.querySelector('.end_text').innerHTML = end_novo; because this command returns only the first matching element to the selector sought (in the case of the first row of the table). To do what you want (apply some styles with javascript to all lines) it is necessary to use the function querySelectorAll that as expected returns all elements matching the searched selector (and can be traversed with a for loop).

Continuing on to the solution. I took the liberty of modifying your logic a little bit. Instead of taking the first 120 letters of <div class="end_text"> and replace within the divria itself (remove the previous content and put only the first 120 letters), created a new div called abstract, and placed the 120 letters (without touching the contents of the <div class="end_text">). Your <td class="end"> was like this:

<td class="end">    
    <div class="end_text">
        É um fato conhecido de todos que um leitor 
        se distrairá com o conteúdo de texto legível de uma página quando estiver 
        examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma 
        distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo 
        aqui", fazendo com que ele tenha uma aparência similar a de um texto 
        legível. Muitos softwares de publicação e editores de páginas na internet 
        agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por ' 
        lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias 
        versões novas surgiram ao longo dos anos, eventualmente por acidente, e às 
        vezes de propósito (injetando humor, e coisas do gênero).                                    
    </div>
    <div class="resumo">
    </div>
    <div class="icone" style="position: absolute;left: 250px; top: 50px; display: none; cursor: pointer;">
        <i onclick="fechareabrir(this)" class="glyphicon glyphicon-chevron-down"></i>    
    </div>    
    <div class="icone2" style="position: absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
        <i onclick="fechareabrir(this)" class="glyphicon glyphicon-chevron-up"></i>    
    </div>
</td>

The summary div has been added to avoid having to store with javascript the old content of the end_text div. Also the function call fechareabrir(this) uses the this parameter (references the clicked object. Allowing to identify which line will have the expanded content. Because, using the closed variable (as you started) it would be difficult to differentiate the line that was clicked. Already with this it identifies the clicked object, or better, in this case the element that calls the function fecharabrir()). Javascript to fill the abstract div and hide the end_text div is as follows (few changes from your!):

//retorna todos os elementos com a classe .end_text
    var ends = document.querySelectorAll('.end_text');            

    var end = 0;        

    for(var i = 0; i < ends.length; i++){
        //pega o conteudo de cada div com a classe .end_text
        end = ends[i].textContent;

        if(end.length > 120){        
            var end_novo = end.substring(0,120);        

            ends[i].parentElement.querySelector('.icone').style.display = "block";
            //oculta a div com a classe .end_text
            ends[i].style.display = "none";
            //coloca parte do texto da div com a classe .end_text na div resumo
            ends[i].parentElement.querySelector('.resumo').innerHTML = end_novo;
            ends[i].parentElement.querySelector('.resumo').style.display = "block";
        }
    }

The main change from its code was the use of the property parentElement used to return the parent of an element (immediately up in the DOM).

The functions fecharabrir, abrir and fechar have undergone some changes (commented in the code):

function fechareabrir(elemento){
        //a variavel this representa o item clicado (argumento de fecharabrir). 
        //E tambem não é necessario alterar o conteudo da div .end_text
        //é complicado controlar o estado de varias linhas com 
        //a variavel fechado, é melhor checar o display da div resumo

        //a variavel elemento representa o elemento clicado
        //então devemos subir (acessar elementos pais) até chegar na div .end_text
        //após isso a variável elemento representa a td que possui .end_text, .resumo, .icone
        elemento = elemento.parentElement.parentElement;
        if(elemento.parentElement.querySelector(".resumo").style.display == "block"){
            abrir(elemento);
        }else{
            fechar(elemento);
        }
    }

    function abrir(elemento){

        //volta a exibir a div .end_text
        elemento.querySelector(".end_text").style.display = "block";
        //oculta a div .resumo
        elemento.querySelector(".resumo").style.display = "none";
        elemento.querySelector('.icone').style.display = "none";            
        elemento.querySelector('.icone2').style.display = "block";

    }

    function fechar(elemento){        
        //volta a exibir a div .resumo
        elemento.querySelector(".resumo").style.display = "block";

        //oculta a div .end_text
        elemento.querySelector(".end_text").style.display = "none";

        elemento.querySelector('.icone').style.display = "block";            
        elemento.querySelector('.icone2').style.display = "none";        
    }

Below the complete code:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
crossorigin="anonymous">


<body>
<style>    
.table thead tr th {
    text-align: center;
}    
.table tbody tr td{
    text-align: center;            
    vertical-align: middle;
}
.table tbody tr td.end{
    position: relative;
    width: 300px !important;        
  }            

</style>

<div class="container">

    <div class="col-md-10">
        <table class="table table-striped table-bordered ">
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Cliente</th>
                    <th>Localidade Cliente</th>
                    <th>Cidade/UF</th>
                    <th>Endereço</th>
                </tr>
            </thead>            

            <tbody>
                <tr>
                    <td>Ativo</td>
                    <td >Fulano de tal</td>
                    <td>Uberlandia</td>
                    <td >Uberlandia GO</td>
                    <td class="end">    
                    <div class="end_text">
                                É um fato conhecido de todos que um leitor 
se distrairá com o conteúdo de texto legível de uma página quando estiver 
examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma 
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo 
aqui", fazendo com que ele tenha uma aparência similar a de um texto 
legível. Muitos softwares de publicação e editores de páginas na internet 
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por ' 
lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias 
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às 
vezes de propósito (injetando humor, e coisas do gênero).                                    
                            </div>
                            <div class="resumo">
</div>
                            <div class="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">

                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">

                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-up"></i>    
                            </div>
                    </td>
                </tr>

                <tr>
                    <td>Ativo</td>
                    <td >Fulano de tal</td>
                    <td>Uberlandia</td>
                    <td >Uberlandia GO</td>
                    <td class="end">    
                    <div class="end_text">
                    É um fato conhecido de todos que um leitor 
                    se distrairá com o conteúdo de texto legível de uma página quando 
                    estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é 
                    que ele tem uma 
                    distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo 
                    aqui", fazendo com que ele tenha uma aparência similar a de um texto 
                    legível. Muitos softwares de publicação e editores de páginas na internet 
                    agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 
                    'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias 
                    versões novas surgiram ao longo dos anos, eventualmente por acidente, e às 
                    vezes de propósito (injetando humor, e coisas do gênero).                                    
                            </div>
                            <div class="resumo">
                            </div>
                            <div class="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">

                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">

                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-up"></i>    
                            </div>
                    </td>
                </tr>

            </tbody>

        </table>
    </div>    


    </div>


<script type="text/javascript">    

    //retorna todos os elementos com a classe .end_text
    var ends = document.querySelectorAll('.end_text');            
    var fechado = true;
    var end = 0;        

    for(var i = 0; i < ends.length; i++){
        //pega o conteudo de cada div com a classe .end_text
        end = ends[i].textContent;

        if(end.length > 120){        
            var end_novo = end.substring(0,120);        

            ends[i].parentElement.querySelector('.icone').style.display = "block";
            //oculta a div com a classe .end_text
            ends[i].style.display = "none";
            //coloca parte do texto da div com a classe .end_text na div resumo
            ends[i].parentElement.querySelector('.resumo').innerHTML = end_novo;
            ends[i].parentElement.querySelector('.resumo').style.display = "block";
        }
    }

    function fechareabrir(elemento){
        //a variavel this representa o item clicado (argunmento de fecharabrir). 
        //E tambem não é necessario alterar o conteudo da div .end_text
        //é complicado controlar o estado de varias linhas com 
        //a variavel fechado, é melhor checar o display da div resumo

        //a variavel elemento representa o elemento clicado
        //então devemos subir (acessar elementos pais) até chegar na div .end_text
        //após isso a variável elemento representa a td que possui .end_text, .resumo, .icone
        elemento = elemento.parentElement.parentElement;
        if(elemento.parentElement.querySelector(".resumo").style.display == "block"){
            abrir(elemento);
        }else{
            fechar(elemento);
        }
    }

    function abrir(elemento){

        //volta a exibir a div .end_text
        elemento.querySelector(".end_text").style.display = "block";
        //oculta a div .resumo
        elemento.querySelector(".resumo").style.display = "none";
        elemento.querySelector('.icone').style.display = "none";            
        elemento.querySelector('.icone2').style.display = "block";

    }

    function fechar(elemento){        
        //volta a exibir a div .resumo
        elemento.querySelector(".resumo").style.display = "block";

        //oculta a div .end_text
        elemento.querySelector(".end_text").style.display = "none";

        elemento.querySelector('.icone').style.display = "block";            
        elemento.querySelector('.icone2').style.display = "none";        
    }


</script>


<!-- Latest compiled and minified JavaScript -->
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"></script>


</body>
</html>

Generating the following output:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-
theme.min.css" integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
crossorigin="anonymous">


<body>
<style>    
.table thead tr th {
    text-align: center;
}    
.table tbody tr td{
    text-align: center;            
    vertical-align: middle;
}
.table tbody tr td.end{
    position: relative;
    width: 300px !important;        
  }            

</style>

<div class="container">

    <div class="col-md-10">
        <table class="table table-striped table-bordered ">
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Cliente</th>
                    <th>Localidade Cliente</th>
                    <th>Cidade/UF</th>
                    <th>Endereço</th>
                </tr>
            </thead>            

            <tbody>
                <tr>
                    <td>Ativo</td>
                    <td >Fulano de tal</td>
                    <td>Uberlandia</td>
                    <td >Uberlandia GO</td>
                    <td class="end">    
                    <div class="end_text">
                                É um fato conhecido de todos que um leitor 
se distrairá com o conteúdo de texto legível de uma página quando estiver 
examinando sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma 
distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo 
aqui", fazendo com que ele tenha uma aparência similar a de um texto 
legível. Muitos softwares de publicação e editores de páginas na internet 
agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por ' 
lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias 
versões novas surgiram ao longo dos anos, eventualmente por acidente, e às 
vezes de propósito (injetando humor, e coisas do gênero).                                    
                            </div>
                            <div class="resumo">
</div>
                            <div class="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">

                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
                            
                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-up"></i>    
                            </div>
                    </td>
                </tr>

                <tr>
                    <td>Ativo</td>
                    <td >Fulano de tal</td>
                    <td>Uberlandia</td>
                    <td >Uberlandia GO</td>
                    <td class="end">    
                    <div class="end_text">
                    É um fato conhecido de todos que um leitor 
                    se distrairá com o conteúdo de texto legível de uma página quando 
                    estiver examinando sua diagramação. A vantagem de usar Lorem Ipsum é 
                    que ele tem uma 
                    distribuição normal de letras, ao contrário de "Conteúdo aqui, conteúdo 
                    aqui", fazendo com que ele tenha uma aparência similar a de um texto 
                    legível. Muitos softwares de publicação e editores de páginas na internet 
                    agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por 
                    'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias 
                    versões novas surgiram ao longo dos anos, eventualmente por acidente, e às 
                    vezes de propósito (injetando humor, e coisas do gênero).                                    
                            </div>
                            <div class="resumo">
                            </div>
                            <div class="icone" style="position: 
absolute;left: 250px; top: 50px; display: none; cursor: pointer;">

                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-down"></i>    
                            </div>    
                            <div class="icone2" style="position: 
absolute;left: 250px; bottom: 5px; display: none; cursor: pointer;">
                            
                                <i onclick="fechareabrir(this)" class="glyphicon 
glyphicon-chevron-up"></i>    
                            </div>
                    </td>
                </tr>

            </tbody>

        </table>
    </div>    


    </div>


<script type="text/javascript">    

    //retorna todos os elementos com a classe .end_text
    var ends = document.querySelectorAll('.end_text');            
    
    var end = 0;        

    for(var i = 0; i < ends.length; i++){
        //pega o conteudo de cada div com a classe .end_text
        end = ends[i].textContent;
        
        if(end.length > 120){        
            var end_novo = end.substring(0,120);        
            
            ends[i].parentElement.querySelector('.icone').style.display = "block";
            //oculta a div com a classe .end_text
            ends[i].style.display = "none";
            //coloca parte do texto da div com a classe .end_text na div resumo
            ends[i].parentElement.querySelector('.resumo').innerHTML = end_novo;
            ends[i].parentElement.querySelector('.resumo').style.display = "block";
        }
    }

    function fechareabrir(elemento){
        //a variavel this representa o item clicado (argunmento de fecharabrir). 
        //E tambem não é necessario alterar o conteudo da div .end_text
        //é complicado controlar o estado de varias linhas com 
        //a variavel fechado, é melhor checar o display da div resumo
        
        //a variavel elemento representao elemento clicado
        //então devemos subir (acessar elementos pais) até chegar na div .end_text
        //após isso a varivel elemento representa a td que possui .end_text, .resumo, .icone
        elemento = elemento.parentElement.parentElement;
        if(elemento.parentElement.querySelector(".resumo").style.display == "block"){
            abrir(elemento);
        }else{
            fechar(elemento);
        }
    }

    function abrir(elemento){
        
        //volta a exibir a div .end_text
        elemento.querySelector(".end_text").style.display = "block";
        //oculta a div .resumo
        elemento.querySelector(".resumo").style.display = "none";
        elemento.querySelector('.icone').style.display = "none";            
        elemento.querySelector('.icone2').style.display = "block";
      
    }

    function fechar(elemento){        
        //volta a exibir a div .resumo
        elemento.querySelector(".resumo").style.display = "block";
        
        //oculta a div .end_text
        elemento.querySelector(".end_text").style.display = "none";

        elemento.querySelector('.icone').style.display = "block";            
        elemento.querySelector('.icone2').style.display = "none";        
    }


</script>


<!-- Latest compiled and minified JavaScript -->
<script	  src="https://code.jquery.com/jquery-3.2.1.min.js"
			  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			  crossorigin="anonymous"></script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
crossorigin="anonymous"></script>


</body>
</html>

One last thing, bootstrap.js file needs jquery.js to be included before (even if you’re not going to use it). The snippet has the inclusion (to avoid the error message related to absence).

  • Thanks for the lesson! It helped me a lot! Thank you!

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.