Afficher plus / Moins de texte avec juste HTML et JavaScript

J'ai besoin de créer une fonction de plus / moins de texte, mais avec juste JavaScript et HTML. Je ne peux pas utiliser d'autres bibliothèques telles que jQuery et cela ne peut pas être fait avec CSS. L'exemple de code que j'ai ajouté affiche le texte «plus», mais pas le «moins».

Si quelqu'un me pointait dans la bonne direction, il serait très apprécié.

J'ai passé la majeure partie de la journée à rôtir mon cerveau à ce sujet, car c'est clairement pas la façon moderne de le faire, cependant, mon HTML est:

<html> <head> <script type="text/javascript" src="moreless.js"></script> </head> <body> Lorem ipsum dolor sit amet <p> <p id="textarea"><!-- This is where I want to additional text--></div> </p> <a onclick="showtext('text')" href="javascript:void(0);">See More</a> <p> Here is some more text </body> </html>

Et mon JavaScript est (moreless.js):

 function showtext() { var text="Here is some text that I want added to the HTML file"; document.getElementById("textarea").innerHTML=text; }

Ma réponse est similaire mais différente, il existe quelques façons d'obtenir un effet de dérivation. Je suppose que cela dépend de votre situation. Ce n'est peut-être pas le meilleur moyen pour vous à la fin.

La pièce manquante que vous avez recherchée consiste à créer une déclaration if . Cela vous permet de basculer votre texte.

Plus sur les déclarations if ici.

JSFiddle: http://jsfiddle.net/8u2jF/

Javascript:

 var status = "less"; function toggleText() { var text="Here is some text that I want added to the HTML file"; if (status == "less") { document.getElementById("textArea").innerHTML=text; document.getElementById("toggleButton").innerText = "See Less"; status = "more"; } else if (status == "more") { document.getElementById("textArea").innerHTML = ""; document.getElementById("toggleButton").innerText = "See More"; status = "less" } }

Avec certains changements HTML, vous pouvez absolument réaliser cela avec CSS:

 Lorem ipsum dolor sit amet <p id="textarea"> <!-- This is where I want to additional text--> All that delicious text is in here! </p> <!-- the show/hide controls inside of the following list, for ease of selecting with CSS --> <ul class="controls"> <li class="show"><a href="#textarea">Show</a></li> <li class="hide"><a href="#">Hide</a></li> </ul> <p>Here is some more text</p>

Couplé avec le CSS:

 #textarea { display: none; /* hidden by default */ } #textarea:target { display: block; /* shown when a link targeting this id is clicked */ } #textarea + ul.controls { list-style-type: none; /* aesthetics only, adjust to taste, irrelevant to demo */ } /* hiding the hide link when the #textarea is not targeted, hiding the show link when it is selected: */ #textarea + ul.controls .hide, #textarea:target + ul.controls .show { display: none; } /* Showing the hide link when the #textarea is targeted, showing the show link when it's not: */ #textarea:target + ul.controls .hide, #textarea + ul.controls .show { display: inline-block; }

Démo de JS Fiddle .

Ou, vous pouvez utiliser une label et une input de type="checkbox" :

 Lorem ipsum dolor sit amet <input id="textAreaToggle" type="checkbox" /> <p id="textarea"> <!-- This is where I want to additional text--> All that delicious text is in here! </p> <label for="textAreaToggle">textarea</label> <p>Here is some more text</p>

Avec le CSS:

 #textarea { /* hide by default: */ display: none; } /* when the checkbox is checked, show the neighbouring #textarea element: */ #textAreaToggle:checked + #textarea { display: block; } /* position the checkbox off-screen: */ input[type="checkbox"] { position: absolute; left: -1000px; } /* Aesthetics only, adjust to taste: */ label { display: block; } /* when the checkbox is unchecked (its default state) show the text 'Show ' in the label element: */ #textAreaToggle + #textarea + label::before { content: 'Show '; } /* when the checkbox is checked 'Hide ' in the label element; the general-sibling combinator '~' is required for a bug in Chrome: */ #textAreaToggle:checked ~ #textarea + label::before { content: 'Hide '; }

Démo de JS Fiddle .

C'est ma pure solution HTML et Javascript:

 var setHeight = function (element, height) { if (!element) {; return false; } else { var elementHeight = parseInt(window.getComputedStyle(element, null).height, 10), toggleButton = document.createElement('a'), text = document.createTextNode('...Show more'), parent = element.parentNode; toggleButton.src = '#'; toggleButton.className = 'show-more'; toggleButton.style.float = 'right'; toggleButton.style.paddingRight = '15px'; toggleButton.appendChild(text); parent.insertBefore(toggleButton, element.nextSibling); element.setAttribute('data-fullheight', elementHeight); element.style.height = height; return toggleButton; } } var toggleHeight = function (element, height) { if (!element) { return false; } else { var full = element.getAttribute('data-fullheight'), currentElementHeight = parseInt(element.style.height, 10); element.style.height = full == currentElementHeight ? height : full + 'px'; } } var toggleText = function (element) { if (!element) { return false; } else { var text = element.firstChild.nodeValue; element.firstChild.nodeValue = text == '...Show more' ? '...Show less' : '...Show more'; } } var applyToggle = function(elementHeight){ 'use strict'; return function(){ toggleHeight(this.previousElementSibling, elementHeight); toggleText(this); } } var modifyDomElements = function(className, elementHeight){ var elements = document.getElementsByClassName(className); var toggleButtonsArray = []; for (var index = 0, arrayLength = elements.length; index < arrayLength; index++) { var currentElement = elements[index]; var toggleButton = setHeight(currentElement, elementHeight); toggleButtonsArray.push(toggleButton); } for (var index=0, arrayLength=toggleButtonsArray.length; index<arrayLength; index++){ toggleButtonsArray[index].onclick = applyToggle(elementHeight); } }

Vous pouvez ensuite appeler la fonction modifyDomElements pour appliquer le raccourcissement de texte sur tous les éléments qui ont raccourci le nom de classe de texte. Pour cela, vous devez spécifier le nom de la classe et la hauteur que vous souhaitez que vos éléments soient raccourcis:

 modifyDomElements('shorten-text','50px');

Enfin, dans votre html, définissez simplement le nom de la classe sur l'élément que vous souhaitez que votre texte raccourci:

 <div class="shorten-text">Your long text goes here...</div>

Essayez de basculer la hauteur.

 function toggleTextArea() { var limitedHeight = '40px'; var targetEle = document.getElementById("textarea"); targetEle.style.height = (targetEle.style.height === '') ? limitedHeight : ''; }

Cela devrait résoudre votre problème:

 function toggleSeeMore() { if(document.getElementById("textarea").style.display == 'none') { document.getElementById("textarea").style.display = 'block'; document.getElementById("seeMore").innerHTML = 'See less'; } else { document.getElementById("textarea").style.display = 'none'; document.getElementById("seeMore").innerHTML = 'See more'; } }

L'exemple de travail complet est ici: http://jsfiddle.net/akhikhl/zLA5K/

J'espère que ce code que vous recherchez est HTML

  <div class="showmore"> <div class="shorten_txt"> <h4> #@item.Title</h4> <p>Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text Your Text </p> </div> </div>

SCÉNARIO:

  var showChar = 100; var ellipsestext = "[...]"; $('.showmore').each(function () { $(this).find('.shorten_txt p').addClass('more_p').hide(); $(this).find('.shorten_txt p:first').removeClass('more_p').show(); $(this).find('.shorten_txt ul').addClass('more_p').hide(); //you can do this above with every other element var teaser = $(this).find('.shorten_txt p:first').html(); var con_length = parseInt(teaser.length); var c = teaser.substr(0, showChar); var h = teaser.substr(showChar, con_length - showChar); var html = '<span class="teaser_txt">' + c + '<span class="moreelipses">' + ellipsestext + '</span></span><span class="morecontent_txt">' + h + '</span>'; if (con_length > showChar) { $(this).find(".shorten_txt p:first").html(html); $(this).find(".shorten_txt p:first span.morecontent_txt").toggle(); } }); $(".showmore").click(function () { if ($(this).hasClass("less")) { $(this).removeClass("less"); } else { $(this).addClass("less"); } $(this).find('.shorten_txt p:first span.moreelipses').toggle(); $(this).find('.shorten_txt p:first span.morecontent_txt').toggle(); $(this).find('.shorten_txt .more_p').toggle(); return false; });

  <script type="text/javascript"> function showml(divId,inhtmText) { var x = document.getElementById(divId).style.display; if(x=="block") { document.getElementById(divId).style.display = "none"; document.getElementById(inhtmText).innerHTML="Show More..."; } if(x=="none") { document.getElementById(divId).style.display = "block"; document.getElementById(inhtmText).innerHTML="Show Less"; } } </script> <p id="show_more1" onclick="showml('content1','show_more1')" onmouseover="this.style.cursor='pointer'">Show More...</p> <div id="content1" style="display: none; padding: 16px 20px 4px; margin-bottom: 15px; background-color: rgb(239, 239, 239);"> </div>

Si plus de div utilise comme ça, changez seulement 1 à 2

 <p id="show_more2" onclick="showml('content2','show_more2')" onmouseover="this.style.cursor='pointer'">Show More...</p> <div id="content2" style="display: none; padding: 16px 20px 4px; margin-bottom: 15px; background-color: rgb(239, 239, 239);"> </div>

Demo jsfiddle