verlinkter text nach klick nicht mehr anzeigen

Stef

Hey,

ich habe mal einen ausklappbaren Text erstellt. Funktioniert auch. Aber wenn ich nun das weiterlesen klick dann erscheint auch der Text aber das weiterlesen bleibt da stehen.
Wie kann man es machen, dass wenn man das weiterlesen.. klickt das dieses dann verschwindet und der andere Text dann sofort anschließt?

Anbei meine Dateien:

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8">

        <link href="test.css" rel="stylesheet">

        <title>Aufklappbarer Text</title>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.takimata sanctus est Lorem ipsum dolor sit<a href="#textb">weiterlesen...</a></p>

        <div id="textb">
        <p >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <a href="#text-b-close">weniger...</a></p>

        </div>


    </body>
</html>

Alles anzeigen

CSS:

Code

*{
    padding: 0px;
    margin: 0px;
    font-family: Verdana, sans-serif;
}


a
{
    padding-left: 10px;
}
#textb:target
{
    display: block;
}


#textb
{
    display: none;
}

Alles anzeigen

Stef

Arne Drews

Muss es ohne Javascript sein?
Sonst würde ich das eher komplett darüber machen, gib Deinen <a>-Tags eine ID und setze einen EventListener drauf:

Code

var _moreText = document.getElementById( 'textb' );
var _btnMore = document.getElementById( 'btn-more' ); // <-- <a>-Tag "weiterlesen"
var _btnLess = document.getElementById( 'btn-less' ); // <-- <a>-Tage "weniger"




_btnMore.addEventListener( 'click', function() {
        _moreText.style.display = 'block';
        this.style.display = 'none';
    });




_btnLess.addEventListener( 'click', function() {
        _moreText.style.display = 'none';
        _btnMore.style.display = 'inline'
    });

Alles anzeigen

Stef

Hey,

ja es sollte möglichst css sein, aber na gut. Das geht ja mit js viel einfacher.

Vielen Dank.

Arne Drews

Jap... Ich wüsste auch ehrlich gesagt nicht, wie das Vorhaben mit reinem CSS umsetzbar sein sollte.
Aber vielleicht schreibt ja noch ein CSS-Profi hier was dazu...

djheke

Hier eine CSS-Spielerei

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


input {
 display:none;
}


input:checked ~ #textb {
    display: block;
}


label {
 text-decoration:underline;
 color:blue;
}


input ~ label:before {
 content:"weiter...";
}


input:checked ~ label:before {
 content:"weniger";
}


#textb {
 display: none;
}
</style>
    </head>
    <body>
 <input type="checkbox" name="weiter" id="weiter">  
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.takimata sanctus est Lorem ipsum dolor sit
</p>

        <div id="textb">
        <p >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

        </div>
 <label for="weiter"></label>    

    </body>
</html>

Alles anzeigen

Arne Drews

Interessante Lösung. Ich würde zwar JS weiterhin vorziehen, aber als reine CSS-Variante sehr ansprechend...

djheke

Wollte nur Stef seinen Wunsch nachkommen.:)

Stef

Hey.

vielen Dank. Was macht den dieses Zeichen : ~ ?

Wenn man nun weiter... klickt dann wird ja der Text mit einem gewissen abstand geöffnet. Wie bekommt man es hin das dieser geöffnete Text genau am letzten satz des vorigen Textes anschließt ? Ist das möglich ?

Gruß,
Stef

djheke

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


#textbox {
 float:left;
 width:50%;
 padding:15px;
 border:1px solid #000;
 box-shadow:0 0 5px #888;
 border-radius:5px;
}


#textbox p { 
 display:inline; /* Optional, wenn Linktext am Text anschließen soll. */
 letter-spacing:2px;
 line-height:20px;
}


#textbox input {
 display:none;
}
#textbox input:checked  ~ p span {
 display:inline;
}
#textbox label {
 text-decoration:underline;
 cursor:pointer;
 color:blue;
 display:inline;
}
#textbox input ~ label:before {
 content:"mehr..";
}
#textbox input:checked ~ label:before {
 content:"weniger";
}
#textbox span {
 display: none;
}


</style>
</head>
<body>
<div id="textbox">
 <input type="checkbox" name="weiter" id="weiter">  
   <h3>Lorem ipsum</h3>
    <p>
     dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.takimata sanctus est Lorem ipsum dolor sit
       <span>
         dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
       </span>
    </p>
  <label for="weiter">.</label>        
</div>   
</body>
</html>

Alles anzeigen

Goggle kaputt?
Lesestoff

http://www.peterkroener.de/schoenes-neues…ing-combinator/
http://www.html-seminar.de/block-elemente…ne-elemente.htm
http://www.peterkroener.de/schoenes-neues…ing-combinator/

http://www.peterkroener.de/schoenes-neues…ing-combinator/

GregOS

Ich würde mit ausgeblendeten Links sehr aufpassen. Das kann von Google missinterpretiert werden und zu einem Verlust bei den Rankings führen.

Arne Drews

Bitte nicht verallgemeinern!
Wenn es "sauber" umgesetzt wird, missinterpretiert Google das (noch) nicht. Oder willst Du jetzt behaupten, dass alle Webpages, die Tabs, Accordeons, etc. verwenden Probleme mit Google bekommen?!

Das Ausblenden oder auch Nachladen von Inhalten ist heute gängige Praxis, das weiß auch Google!
Man muß nur schauen, dass man es richtig macht...

djheke

In diesem Fall werden ja auch keine Links versteckt. Alternativ zu display:none könnte man bspw. auch font-size:0; oder position.absolute verwenden.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Aufklappbarer Text</title>
<style>


#textbox {
 float:left;
 width:50%;
 padding:15px;
 border:1px solid #000;
 box-shadow:0 0 5px #888;
 border-radius:5px;
}


#textbox p { 
 display:inline; /* Optional, wenn Linktext am Text anschließen soll. */
}


#textbox input {
 display:none;
}
#textbox input:checked  ~ p span {
 position:relative;
 left:0;
 top:0;
/*oder
 font-size:1rem;
*/
}
#textbox label {
 text-decoration:underline;
 cursor:pointer;
 color:blue;
 display:inline;
}
#textbox input ~ label:before {
 content:"mehr..";
}
#textbox input:checked ~ label:before {
 content:"weniger";
}
#textbox  p span {
 position:absolute;
 left:-999999rem;
 top:-99999rem;
/*oder
 font-size:0;
*/
}


</style>
</head>
<body>
<div id="textbox">
 <input type="checkbox" name="weiter" id="weiter">  
   <h3>Lorem ipsum</h3>
    <p>
     dolor sit amet,
       <span>
         dolor sit amet, 
       </span>
    </p>
  <label for="weiter">.</label>        
</div>   
</body>
</html>

Alles anzeigen

Arne Drews

Bei font-size:0; denke ich schon, dass Gregor dann recht hat, das würde Google als Täuschungsversuch werten, weil das nun keine gängige Praxis ist, würde ich sagen...

djheke

Ich gehe mal davon aus, dass Google unterscheiden kann, ob HTML-Elemente dauerhaft ausgeblendet sind oder nicht. Ansonsten halte ich das Thema für Panikmache.

Arne Drews

Generell ja... Aber für font-size:0; sehe ich das nicht als gängige Praxis und daher evtl. negativ für Google, denn auch dort wird nach gängiger Praxis differenziert.
Daher der Hinweis und keine "Panikmache"!

Stef

Hey,

vielen Dank.

Ja aber dies ist nur fürn sehr langen text.. da ist doch nichts schlecht dran. ?