Javascript-форум - Спойлер для статей

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Спойлер для статей (https://javascript.ru/forum/events/63384-spojjler-dlya-statejj.html)

Спойлер для статей

Взял готовый спойлер, чуть его отредактировал, как мне надо, а он не совсем корректно работает, помогите пожалуйста понять, в чём проблема. в JS к сожалению не силён, так что не взыщите) буду признателен за помощь
это скрипт

Код:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

<script type="text/javascript">

    function show(ele) {

      var srcElement = document.getElementById(ele);

      if(srcElement != null) {

          if(srcElement.style.display == "block") {

          srcElement.style.display= 'none';

            var link_name = "<br>Читать далее";

            document.getElementById("tips1").innerHTML = link_name;



          

          }

          else{

            srcElement.style.display='block';

            var link_name = 'Свернуть';

            document.getElementById("tips1").innerHTML = link_name;

          

          }

      }

    }

  </script>

а это html, допустим надо вывести пять статей, как сделать корректный вывод подскажите, плиз

Код:

<p>

<span style="float: left;">kh j ljk lkj lkj lkj kj !</span><span id="tt">...</span>

<div class="hidden" style="display: none;" id="cat">

<span>nnwedl jnew dfejefr rfjrelfe rfelf er </span>

</div>

  <div class="headline" onclick="show('cat')"><p id="tips1" style="text-align: left;"><br>Читать далее</p></div>

</p>

<p>

<span style="float: left;">kh j ljk lkj lkj lkj kj !</span><span id="tt">...</span>

<div class="hidden" style="display: none;" id="cat">

<span>nnwedl jnew dfejefr rfjrelfe rfelf er </span>

</div>

  <div class="headline" onclick="show('cat')"><p id="tips" style="text-align: left;"><br>Читать далее</p></div>

</p>

<p>

<span style="float: left;">kh j ljk lkj lkj lkj kj !</span><span id="tt">...</span>

<div class="hidden" style="display: none;" id="cat">

<span>nnwedl jnew dfejefr rfjrelfe rfelf er </span>

</div>

  <div class="headline" onclick="show('cat')"><p id="tips" style="text-align: left;"><br>Читать далее</p></div>

</p>

<p>

<span style="float: left;">kh j ljk lkj lkj lkj kj !</span><span id="tt">...</span>

<div class="hidden" style="display: none;" id="cat">

<span>nnwedl jnew dfejefr rfjrelfe rfelf er </span>

</div>

  <div class="headline" onclick="show('cat')"><p id="tips" style="text-align: left;"><br>Читать далее</p></div>

</p>

<p>

<span style="float: left;">kh j ljk lkj lkj lkj kj !</span><span id="tt">...</span>

<div class="hidden" style="display: none;" id="cat">

<span>nnwedl jnew dfejefr rfjrelfe rfelf er </span>

</div>

  <div class="headline" onclick="show('cat')"><p id="tips" style="text-align: left;"><br>Читать далее</p></div>

</p>

Mori_Arti,
id уникально, поиск по форуму на слово открывашка

Цитата:

Сообщение от рони (Сообщение 418498)

Mori_Arti,
id уникально, поиск по форуму на слово открывашка

Я делал id уникальным, к каждому id'шнику ещё добавлял id статьи, всё ровно криво открывает, потому собственно и спрашиваю здесь. а по открывашке не нашёл варианты разворачивания вверх текста, а не вниз

Цитата:

Сообщение от Mori_Arti

Я делал id уникальным

где?

Цитата:

Сообщение от Mori_Arti

Цитата:

Сообщение от Mori_Arti

onclick="show('cat')"><

Цитата:

Сообщение от рони (Сообщение 418503)

где?

вот, только, один чёрт, не работает :(

Код:

<?php

  $i=1;

?>

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>JS Bin</title>

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

<script type="text/javascript">

    function show(ele) {

      var srcElement = document.getElementById(ele);

      if(srcElement != null) {

          if(srcElement.style.display == "block") {

          srcElement.style.display= 'none';

            var link_name = "<br>Читать далее<?=$i?>";

            document.getElementById("tips<?=$i?>").innerHTML = link_name;



          

          }

          else{

            srcElement.style.display='block';

            var link_name = 'Свернуть<?=$i?>';

            document.getElementById("tips<?=$i?>").innerHTML = link_name;

          

          }

      }

    }

  </script>

</head>

  

  

<body>

<?php

  for( $i=1; $i<6; $i++){

    global $i;

?>



<p>

<span style="float: left;">kh j ljk lkj lkj lkj kj !</span><span id="tt<?=$i?>">...</span>

<div class="hidden" style="display: none;" id="cat<?=$i?>">

<span>nnwedl jnew dfejefr rfjrelfe rfelf er </span>

</div>

  <div class="headline" onclick="show('cat<?=$i?>')"><p id="tips<?=$i?>" style="text-align: left;"><br>Читать далее<?=$i?></p></div>

</p>



  <?php }?>

</body>

  

  

</html>

точнее вот

Код:

<?php

  $i=1;

?>

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8 />

<title>JS Bin</title>

 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

<script type="text/javascript">

    function show(ele) {

      var srcElement = document.getElementById(ele);

      if(srcElement != null) {

          if(srcElement.style.display == "block") {

          srcElement.style.display= 'none';

            var link_name = "<br>Читать далее<?=$i?>";

            var link_names = "...";

            document.getElementById("tips<?=$i?>").innerHTML = link_name;

            document.getElementById("tt<?=$i?>").innerHTML = link_names;



          

          }

          else{

            srcElement.style.display='block';

            var link_name = 'Свернуть<?=$i?>';

             var link_names = "";

            document.getElementById("tips<?=$i?>").innerHTML = link_name;

              document.getElementById("tt<?=$i?>").innerHTML = link_names;

          }

      }

    }

  </script>

</head>

  

  

<body>

<?php

  for( $i=1; $i<6; $i++){

    global $i;

?>



<p>

<span style="float: left;">kh j ljk lkj lkj lkj kj !</span><span id="tt<?=$i?>">...</span>

<div class="hidden" style="display: none;" id="cat<?=$i?>">

<span>nnwedl jnew dfejefr rfjrelfe rfelf er </span>

</div>

  <div class="headline" onclick="show('cat<?=$i?>')"><p id="tips<?=$i?>" style="text-align: left;"><br>Читать далее<?=$i?></p></div>

</p>



  <?php }?>

</body>

  

  

</html>

Цитата:

Сообщение от Mori_Arti

а по открывашке не нашёл варианты разворачивания вверх текста, а не вниз

css и html тоже бы вам надо изучить ... сложно вам помочь ... попробуйте всё таки среди 250 вариантов спойлеров (открывашка) найти свой, и попробуйте не смешивать p и div ...выберите что-то одно для начала.