<div class="panel panel-default"> <div class="panel-heading">Главная</div> <div class="panel-body"> <ul> <li><a data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_1</a> </li> <li><a data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_2</a> </li> </ul> </div> </div>

Tell me, please, how when clicking on Проверка_1 load a page with one text, and when you click Проверка_2 , with another? That is, not to make a new page for each text (html).

    1 answer 1

    You can make 2 blocks with text and hide them by default. When you click on Проверка_1 using javascript, you need to display a block with text, and also for the second block.

     $("#check_1").click(function(){ $("#text_1").toggleClass("hidden"); }); $("#check_2").click(function(){ $("#text_2").toggleClass("hidden"); }); 
     .hidden { opacity: 0; } .textbox { width: 50px; height: 50px; border: 1px solid red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel panel-default"> <div class="panel-heading">Главная</div> <div class="panel-body"> <ul> <li><a id="check_1" data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_1</a> </li> <li><a id="check_2" data-toggle="collapse" class="spoiler-trigger" style="color: #337ab7;">Проверка_2</a> </li> </ul> </div> </div> <div id="text_1" class="textbox hidden">text 1</div> <div id="text_2" class="textbox hidden">text 2</div>

    • It would be nice to see the code) and more, and if there are many similar links? - Maxim
    • one
      @ Maxim, updated the answer - Abmin
    • Thanks, I think, I will understand further. - Maxim