Expansion dans un paragraphe

Question

Je suis assez nouveau pour javascript et j'ai joué avec plus de 10 solutions de stackoverflow à un paragraphe réductible mais aucun d'eux n'est fidèle à ce que je veux. La plupart d'entre eux utilise des listes, des boutons, des tableaux css seulement (je suis hésitant car les problèmes de support du navigateur). Je ne veux pas que le lien soit un type de boutons, je veux juste que ce soit un lien texte. La phrase élargie devrait également continuer de façon transparente et ne pas commencer sur la ligne suivante ou quoi que ce soit.

Ce que je veux est un paragraphe simple avec un lien de texte à l'intérieur qui une fois cliqué peut être étendu. Illustration: "Ceci est une phrase [plus]" -> "Ceci est une phrase et élargi"

Et j'en ai besoin pour revenir en arrière quand on clique à nouveau sur la phrase développée.

Actuellement, j'utilise ce code, mais parce qu'il traite des divs, j'ai des problèmes pour atteindre un paragraphe sans couture. (J'ai besoin le texte élargi pour ressembler à elle continue la phrase, non pas avec une pause ou la ligne suivante.)

scénario

$(document).ready(function(){ 
$("#button-1").click(function(){ 
     $("#special1").toggle() 
}) 
}) 
</script> 

et html

<h2>This is a sentence<div id="button-1">[more]</h2> 
<p id="special1">blah 
blah </p> 
</div> 

et css

#special1{ display: none;} 

Answer 1

Cochez ici si cela fonctionne.

J'ai remplacé <div>, <p> balises avec <span> parce que la durée ne créer une nouvelle ligne, et dans les js j'ai défini, si un message texte visible alors cliquable sera changé en « moins » au lieu de " plus". Pour désactiver "double-click-text-selection" j'ai ajouté quelques css.

$(document).ready(function(){ 
 
    $("#button-1").click(function(){ 
 
     $("#special1").toggle() 
 
     var isVisible = $("#special1").is(":visible"); 
 
     if(isVisible){ 
 
     $("#button-1").html("[less]"); 
 
     }else{ 
 
     $("#button-1").html(" [more]"); 
 
     } 
 
    
 
    }) 
 
})

#special1{ display: none;} 
 
#button-1{ 
 
    cursor:pointer; 
 
    -moz-user-select: none; 
 
    -webkit-user-select: none; 
 
    -ms-user-select: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</script> 
 

 
<p>This is a sentence <span id="special1">blah 
 
blah </span><span id="button-1"> [more]</span></p>

Answer 2

<script type='text/javascript' 
src='https://code.jquery.com/jquery-1.12.4.min.js'> 
</script> 

<script> 
function ShowFull(x) 
{ 
$('#full').toggle(x); 
$('#short').toggle(!x); 
} 
</script> 

This is a sentence <span id='short' onclick='ShowFull(1)'>[more]</span> 
<span id='full' onclick='ShowFull(0)' style='display:none'>and expanded.</span>