Comment voulez-vous montrer la première ligne de texte d'un div et de développer cliquez sur?

J'en veux pour preuve la première ligne d'un bloc de texte enveloppé, et ensuite révéler l'ensemble du bloc sur cliquez sur. Aussi, j'aimerais savoir comment faire pour réactiver le compact version d'une ligne sur un deuxième clic.

Est-il un moyen facile de le faire par css + javascript? J'utilise jQuery.

Pas tout à fait sûr, mais je suppose que height:1em devrait faire l'affaire pour l'affichage de la première ligne. Pour l'extension, je pense que javascript est nécessaire.
Quelle que soit la solution, le contenu doit être caché par l'ajout d'une classe en JS le plus tôt possible après le chargement. Ensuite, si le JS est désactivé, le contenu sera toujours montré.Pour info, les personnes aveugles et malvoyantes à l'aide d'un lecteur d'écran ainsi que les utilisateurs de surf avec CSS désactivé, ainsi que les robots de recherche et leur cache d'accès à l'ensemble du contenu de w/o clic. Peut être une bonne ou une mauvaise chose selon votre besoin.

InformationsquelleAutor dan | 2011-08-07

15

En supposant que vous ne voulez pas utiliser la bibliothèque JavaScript (qui est bizarre).

Voir: http://jsfiddle.net/JUtcX/

HTML:
```
<div id="content"></div>
```
CSS:
```
#content {
    border: 1px solid red;
    height: 1em;
    padding: 2px; /* adjust to taste */
    overflow: hidden    
}
```
JavaScript:
```
document.getElementById("content").onclick = function() {
    this.style.height = 'auto';
}
```
Alternativement, si vous souhaitez utiliser un framework JavaScript comme jQuery, vous pouvez l'animer.

Voir: http://jsfiddle.net/JUtcX/2/
```
$('#content').click(function() {
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);

    $(this).animate({height: fullHeight}, 500);
});
```
- Pourriez-vous modifier votre réponse à montrer comment basculer l'expansion de retour aux dimensions compactes sur un deuxième clic?
- Je pense que j'ai tout compris
- Avez-vous encore besoin d'aide? Êtes-vous à l'aide de la pure solution d'activer JavaScript ou jQuery un?
- Je suis à l'aide de jQuery. Merci pour votre aide!
- J'ai neatened un peu et ajouté un interrupteur à bascule: jsfiddle.net/JUtcX/4
- Ce qui fonctionne à merveille, mais est-il possible que je peux le faire fonctionner en cliquant sur un lien (par exemple, " Plus de..."), dans le div plutôt que de la div en lui-même?
- Si vous utilisez la version jQuery, quelque chose comme: jsfiddle.net/thirtydot/JUtcX/68
- Qui semble parfait. Je vais essayer sur la page en question. Vous êtes un gentleman et un érudit, monsieur!
- Merci pour le javascript solution, beaucoup apprécié.
InformationsquelleAutor thirtydot
8

Cela se fait facilement à l'aide de CSS + JavaScript. Vous avez juste besoin de régler la hauteur de la div à la hauteur d'une ligne, et de cacher tout débordement. Ensuite, lorsque l'utilisateur clique sur le div, utiliser une belle animation gestionnaire pour effectuer un aveugle ou d'autres semblables à l'effet d'afficher la totalité du contenu de la div.

Voici un exemple très simple (pas d'animation): http://jsfiddle.net/9Lw6T/
- $(".expander").click(function() { $(this).toggleClass("expander"); });
InformationsquelleAutor aroth

JS:

$(document).on('click', '.collapsible', function () {
  $(this).toggleClass('collapsed');
});

CSS:

p {
  cursor: pointer;
}

.collapsed {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML:

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

<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click.
Is there an easy way to do this through css + javascript? I use jQuery.</p>

InformationsquelleAutor Qwertiy

<div id='a' onclick='toggletext'>first line<br /></div>

function toggletext(){
   var html= document.getElementById('a').innerHTML;
   if(html=='first line<br />'){
       html = 'first line<br />next lines<br />next lines<br />';
   }else{
       html = 'first line<br />';
   }
   document.getElementById('a').innerHTML = html
}

cela peut être optimisé et peut être fait pour utiliser l'un des libs

InformationsquelleAutor Itay Moav -Malimovka

0

Vous pouvez le faire avec certains jQuery.
```
<div id="a">
    <span id="first">This is the first line (read more)</span>
    <br />
    <span id="rest">This is the rest of the text</span>
</div>
```
script
```
$('#rest').hide();

$('#first').click(function(){
    $('#rest').show();        
});
```
http://jsfiddle.net/jasongennaro/dC32A/
- Ne fonctionne pas. L'OP a dit qu'il a enveloppé (comme dans "mot-enveloppé") du texte dans le div, pas de texte qui a des retours à la ligne (en elle.
- Je prends ce que vous n'aimez pas jQuery? 😉 C'est juste une option. Merci pour le commentaire.
InformationsquelleAutor Jason Gennaro
0

En CSS définir la taille de la div à la taille de la ligne (important: vous devrez peut-être utiliser l'espacement des lignes d'attribut pour obtenir bon rembourrage sur le fond avec de la deuxième ligne).

Je ne sais pas à propos de clic, mais vous pouvez utiliser :hover dans le CSS pour modifier le style (réinitialisation de l'espacement des lignes, la réinitialisation de la div de taille et de dépassement de valeurs propres) pour obtenir sur le vol stationnaire-montrer l'effet.

Ou vous pouvez utiliser JavaScript et modifier la CSS sur la souris (facile à faire avec jQuery).

InformationsquelleAutor Chris Hasiński
0

De poster mon commentaire comme une réponse:

Une autre approche pourrait être, la définition de la classe height: 1em; overflow-y: hidden; puis ajout/suppression de sur cliquez avec javascript.

Ou peut-être vous pouvez également gérer dans le :active-pseudo-classe en enveloppant votre <div> avec un <a>-tag, donc pas de javascript serait nécessaire. Mais alors la div allait s'effondrer à nouveau sur la perte de focus.

InformationsquelleAutor Quasdunk

Ce sera suffisant:

Pour masquer toutes les mais la première ligne:

var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'hidden';
theDiv.style.height = '1em';

Pour afficher tout le texte:

var theDiv = document.getElementById('theDiv');
theDiv.style.overflowY = 'visible';
theDiv.style.height = 'auto';

Ou, si vous utilisez jQuery:

$('#theDiv').css({ height: '1em', overflowY: 'hidden' });

$('#theDiv').css({ height: 'auto', overflowY: 'visible' });

InformationsquelleAutor FishBasketGordo

0

Réglage de la cacher de la div pour cadratin (1 em et puis exapnd il onclick est la solution.

Vérifier ce point. Je n'ai pas utilisé toute bibliothèque JS.

CSS
```
.expandable{
    height:1.2em;
    overflow:hidden;
}
```
HTML
```
<div class="expandable" onclick="expand(this)">Your text here</div>
```
JS
```
window.expand = function(el) {
    el.style.height = "auto";
}
```
Ici est le violon

http://jsfiddle.net/RwM8S/1/

InformationsquelleAutor avetarman

Vous devez vous connecter pour publier un commentaire.