Box durch Klick erst anzeigen lassen.

correl

Hallo zusammen,

ich möchte gerne eine Box erst anzeigen lassen, wenn man auf "Garantiebestimmung" klickt. Das Feld soll auch solange offen sein bis man wieder drauf klickt. Aber irgendwie krieg ich das nicht hin. Der Hover Effekt bringt mich leider nicht weiter. Kann mir vielleicht hier wer helfen?

HTML

<!DOCTYPE html><html><head><style>p {    display: none;    background-color: yellow;    padding: 20px;}
div:hover p {    display: block;}</style></head><body>
<div>Garantiebestimmung  <p>Das ist ein Test</p></div>
<br><br>Hier kommt noch mehr text rein, später
</body></html>

Sailor

Das wirst du mit HTML und CSS alleine nicht schaffen - da brauchst du auch etwas JavaScript.

Versuche es mal so in dieser Art:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <script>
    function toggledisplay(elementID)
    {
        (function(style) {
            style.display = style.display === 'none' ? '' : 'none';
        })(document.getElementById(elementID).style);
    }
    </script>
    <style type="text/css">
    <!--
       p {
        font-size: 2em;
        border: 2px solid #000000;
        border-radius: 3 px;
        width: 15em;
        text-align: center;
       }
    -->
    </style>
</head>
<body>




<a href="#" title="Zeige Garantiebedingungen" onClick="toggledisplay('an_aus');">Garantiebestimmung</a>
<p id="an_aus" class="garantie_box">Das ist ein Test</p>


</body>
</html>

Alles anzeigen

correl

Ich hab vergessen zu erwähnen, es darf kein JS vorhanden sein. Das ganze soll später in eine Ebay Auktion und die erlauben keine scripte mehr.

Sailor

Tja... dann viel Erfolg beim Ausprobieren! Aber bei CSS fällt mir zum Einblenden wirklich nur hover ein, aber das wirkt ja nur so lange, wie die Maus drauf zeigt.
Ich denke fast, ohne JS wird das nicht elegant zu lösen seiin.
Unelegant könntest du die Seite 2 mal haben.. eine mit, eine ohne die Box, die sich beim Klick auf den Link gegenseitig aufrufen - aber bei so einer Lösung sträuben sich mir die Nackenhaare.

Aber vielleicht fällt jemandem ja noch was machbares ein.

djheke

Mit einem Inputelement und :checked geht es.
Beispiel:

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

Sailor

djheke
... und sie dreht sich doch - na ja, öffnet sich ... und das ohne JS!
Gutes Ding.

Arne Drews

Auf die Art wird i.d.R. in eBay-Templates aufgrund der neuen Richtlinien auch TabbedContent umgesetzt.

Tags