Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 16

Thema: verlinkter text nach klick nicht mehr anzeigen

  1. #1
    Fortgeschrittene/r
    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard verlinkter text nach klick nicht mehr anzeigen

    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-Code:
    <!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>
    CSS:
    Code:
    *{
        padding: 0px;
        margin: 0px;
        font-family: Verdana, sans-serif;
    }
    
    a
    {
        padding-left: 10px;
    }
    #textb:target
    {
        display: block;
    }
    
    #textb
    {
        display: none;
    }
    Stef
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.231
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    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'
        });

  3. Folgende User finden die Antwort von Arne Drews gut:


  4. #3
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    Hey,

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

    Vielen Dank.

  5. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.231
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    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...

  6. #5
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    Hier eine CSS-Spielerei
    Code:
    <!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>

  7. Folgende User finden die Antwort von djheke gut:


  8. #6
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.231
    Danke
    21
    Bekam 120 mal "Danke" in 119 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

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

  9. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    Wollte nur Stef seinen Wunsch nachkommen.

  10. #8
    Fortgeschrittene/r
    Themenstarter

    Registriert seit
    25.06.2016
    Beiträge
    178
    Danke
    6
    Bekam 12 mal "Danke" in 12 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    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

  11. #9
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    Code:
    <!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>
    Goggle kaputt?
    Lesestoff

    http://www.peterkroener.de/schoenes-...ng-combinator/
    http://www.html-seminar.de/block-elemente-und-inline-elemente.htm



    Geändert von djheke (22.07.2016 um 10:50 Uhr)

  12. #10
    Youngster
    Registriert seit
    24.07.2016
    Ort
    Winterthur
    Beiträge
    10
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: verlinkter text nach klick nicht mehr anzeigen

    Ich würde mit ausgeblendeten Links sehr aufpassen. Das kann von Google missinterpretiert werden und zu einem Verlust bei den Rankings führen.
    Mein Buch: Pagespeed-Optimierung: Schritt für Schritt zur schnelleren Webseite:
    www.pagespeed-optimierung.com

Ähnliche Themen

  1. verlinkter Text in Flash
    Von Nizina im Forum Flash Forum
    Antworten: 5
    Letzter Beitrag: 15.08.2010, 20:42
  2. Nicht mehr anzeigen
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 17.05.2010, 13:18
  3. Text nach Formular abschicken über diesem anzeigen lassen
    Von zahlenmeer im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 03.08.2008, 14:43
  4. Nach Klick auf link text markieren
    Von RedMan im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 09.05.2007, 18:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •