Extension de texte dans du texte en expansion

Question

J'ai trouvé plusieurs codes fournissant des options brillantes pour qu'un texte se développe en cliquant sur un autre. Développer/réduire les fonctions, je crois que nous sommes tous un peu familiers avec eux. Mais ce qui m'intéresse principalement, c'est comment pourrais-je étendre le show de texte à partir d'un bloc de texte que j'avais déjà développé à partir d'une autre ligne? Je veux dire que je clique sur une ligne et qu'elle montre une autre ligne sur laquelle je peux cliquer à nouveau et qui montre une troisième qui n'était pas visible auparavant.

Est-ce possible d'une manière ou d'une autre? Merci beaucoup pour vos commentaires pour lesquels vous prenez le temps de fournir à l'avance!

Answer 1

Vous pouvez essayer quelque chose comme ceci: https://jsfiddle.net/julienetienne/41g9f1pt/1/

La clé est d'obtenir l'indice, je préfère mettre liste des noeuds dans des tableaux, de cette façon, vous pouvez utiliser les fonctions premières de classe. Cette démo rugueuse j'ai fait aura besoin d'un polyfill ou deux pour le soutien 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

Je vois que vous avez marqué jQuery, donc j'écris petit exemple très simple https://jsfiddle.net/alienpavlov/khk40ygm/2/ utiliser:

$('.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>

Dans cet exemple, vous pouvez avoir plus de 2 éléments enfants