afficher plus fonctionnalité avec css

Je suis actuellement en train de travailler sur un asp.net l'application mvc et à l'aide de css3 pour tous mon écran.

J'ai un peu de texte sur l'écran et je voudrais montrer à l'utilisateur un certain montant de celle-ci avec la possibilité de cliquer sur le lien "afficher plus".

Je voudrais donc avoir un div avec une hauteur donnée, et en cliquant sur le spectacle plus montrer le reste du contenu.

Cela peut-il être réalisé avec css exclusivement?

cssnewbie.com/showhide-content-css-javascript/#.UWydK4LJ7-k

OriginalL'auteur amateur | 2013-04-16

  1. 10

    Vous pouvez utiliser un contrôle (ou la radio) entrée de contrôle de la visibilité de la proximité du div. Vous pouvez également masquer les contrôles d'entrée et de manipuler le positionnement de l'entrée et la comme il apparaît ci-dessous le contenu.

    <div class="container">
<input id="ch" type="checkbox">
<label for="ch"></label>
<div class="text"> your actual text goes here</div>
</div>

.text {
    height: 100px;
    overflow: hidden;
}
.container {
    position: relative;
}
label {
    position: absolute;
    top: 100%;
}
input {
    display: none;
}
label:after {
    content: "Show More";
}
input:checked + label:after {
    content: "Show Less";
}
input:checked ~ div {
    height: 100%;
}

    http://jsfiddle.net/ExplosionPIlls/6sj4e/

    Nice CSS seule solution! +1
    simple et propre.

    OriginalL'auteur Explosion Pills

  2. 0

    Vous aurez à jouer avec le css pour cela de regarder à droite (afficher plus d'être sur le bas), mais une solution pourrait ressembler à quelque chose comme

    <a id="showmore" href="#">Show More</a>
<div id="content">lots of content</div>

    CSS:

    <style>
#content { height: 100px; overflow: hidden; }
a#showmore:visited + #content { height: auto; overflow: visible}
</style>

    OriginalL'auteur dave

  3. 0

    Vous pouvez utiliser :target sélecteur.

    HTML

    <a id="showmemore" href="#contentofsite">Show More</a>
<div id="contentofsite">
    ......
    ......
    ......
    ......
</div>

    CSS

    #contentofsite { 
    height: 50px; 
    overflow: hidden; 
}
#showmemore + #contentofsite:target { 
    height: auto;
    overflow: visible;
}

    http://jsfiddle.net/MfyPM/

    Ou vous pouvez utiliser :focus pseudo-classe.

    HTML

    <a id="showmemore" tabindex="0" href="#">Show More</a>
<div id="contentofsite">
    ......
    ......
    ......
    ......
</div>

    CSS

    #contentofsite { 
    height: 50px; 
    overflow: hidden; 
}
#showmemore:focus + #contentofsite { 
    height: auto;
    overflow: visible;
}

    http://jsfiddle.net/MfyPM/1/

    OriginalL'auteur Miljan Puzović