Форум

Mori_Arti · #1 (**permalink**) 04.06.2016, 19:43

Взял готовый спойлер, чуть его отредактировал, как мне надо, а он не совсем корректно работает, помогите пожалуйста понять, в чём проблема. в 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>

рони · #2 (**permalink**) 04.06.2016, 20:28

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

Mori_Arti · #3 (**permalink**) 04.06.2016, 21:00

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

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

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

рони · #4 (**permalink**) 04.06.2016, 21:13

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

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

где?

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

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

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

Mori_Arti · #5 (**permalink**) 04.06.2016, 21:45

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

где?

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

Код:

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

Mori_Arti · #6 (**permalink**) 04.06.2016, 21:48

точнее вот

Код:

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

рони · #7 (**permalink**) 04.06.2016, 22:28

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

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

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

Форум

Справочник

Discord чат

Курсы javascript