Расширяемый текст в пределах расширяющегося текста

Question

Я нашел несколько кодов, предоставляющих блестящие варианты, чтобы текст расширялся при нажатии на другой. Разверните/сверните функции, я считаю, что мы все с ними знакомы.

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

Возможно ли это каким-либо образом? Большое вам спасибо за любую обратную связь, за которую вы уделяете время заранее.

Answer 1

Вы можете попробовать что-то вроде этого: https://jsfiddle.net/julienetienne/41g9f1pt/1/

Ключ должен получить индекс, я предпочитаю, чтобы поместить узел-лист в массивы, таким образом, вы можете использовать первые функции класса. Это грубое демо я сделал потребуется polyfill или два для поддержки IE8:

var section = document.getElementsByTagName('section')[0]; 
 
var sectionArray = [].slice.call(section.children); 
 
var lastElement; 
 

 
section.addEventListener('click', showHide, true); 
 

 
function showHide(e) { 
 
    var target = e.target; 
 
    var indexOfSection = sectionArray.indexOf(target); 
 
    var elementToToggleHeight; 
 
    // If element is a paragraph 
 
    if (target.tagName === 'P') { 
 
    var elementToToggle = section.children[indexOfSection + 1]; 
 

 
    if(indexOfSection + 1 < sectionArray.length){ 
 
     elementToToggleHeight = parseInt(window.getComputedStyle(elementToToggle, null).getPropertyValue("height"),10); 
 
     } 
 

 
    if (elementToToggleHeight) { 
 
     // Function to close all except current and first 
 
     sectionArray.forEach(function(paragraph){ 
 
     if(paragraph !== target && paragraph !== sectionArray[0]){ 
 
     paragraph.style.height = 0; 
 
     } 
 
     }); 
 

 
    } else { 
 
     if(elementToToggle) 
 
     elementToToggle.style.height = '1em'; 
 
    } 
 
    } 
 
}

p { 
 
    font-size: 1em; 
 
    cursor: pointer; 
 
    height: 0; 
 
    overflow: hidden; 
 
    background: yellowgreen; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
p:first-child { 
 
    height: auto; 
 
}

<section> 
 
    <p>The path of the righteous man is beset on all sides</p> 
 
    <p>by the inequities of the selfish and the tyranny of evil men</p> 
 
    <p>And I will strike down upon thee with great </p> 
 
    <p>vengeance and furious anger those who would attempt</p> 
 
    <p>to poison and destroy my brothers</p> 
 
</section>

Answer 2

Я вижу, что вы с тегами JQuery, поэтому я пишу маленький очень простой пример https://jsfiddle.net/alienpavlov/khk40ygm/2/ использовать его:

$('.expand').click(function(e) { 
 
    e.stopPropagation(); 
 
    var $expand = $(this).children('.expand.hide'); 
 
    if ($expand.length >= 1) { 
 
     $expand.removeClass('hide'); 
 
    } else { 
 
     $(this).find('.expand').addClass('hide'); 
 
    } 
 
});

div { 
 
    padding: 15px; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="expand"> 
 
    Some parent text 
 
    <div class="expand hide"> 
 
     1st level child 
 
     <div class="expand hide"> 
 
      2n level child 
 
     </div> 
 
    </div> 
 
</div>

В этом примере у вас может быть более 2 дочерних элементов