Nach dem Klicken neues Feld erscheinen lassen

selection

Hallo,

nehmen wir an ich habe etwas gepostet und möchte die Kommentare ansehen. Dann klick ich auf z.B ( "24 Kommentare" ) und dann erscheint unten eine Box wo alle Kommentare erscheinen. Wie mache ich sowas mit CSS? bei Php macht man es ja mit isset($_POST['comment']) beispielsweise.

Lg

Jav

"transition" ist da ein richtiges Zauberwort. Damit und mit hover auf den Link (der ja dann keiner mehr sein muss) kannst du die Box mit den Kommentaren einblenden.

Stef

Aber hover ist da auch nicht so gut. Dann kann er ja nur die Beiträge sehen wenn er dieses eine element mit der mouse berührt.

Das leichteste wäre javascript. Da fügst du einen eventListener Click auf das element hinzu und sagst, wenn es geklickt ist, dann blende Kommentare ein, wenn es wieder angeklickt wird blende Kommentare aus.

Beispiel mit javascript: https://jsfiddle.net/nb04o74x/

Jav

Ja, Stef, stimme ich dir zu, aber der TE hat ja explizit nach CSS gefragt.

selection

Stef wie kann ich es machen das unten der Text steht und oben Hide Message?

Stef

Dann musst du einfach den button nach oben platzieren.

https://jsfiddle.net/nb04o74x/1/

selection

Hab es kurz mal Copy & Paste gemacht aber es scheint so als ob javascript keine Wirkung zeigt.

Spoiler anzeigen

Code

<head>

    <link rel="icon" href="img/snap.png" type="image/x-icon">
    <title>Snapchat Connection</title>
    <meta charset="utf-8"/>
    <meta lang="de-de"/>
    <meta lang="en-en"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="css/style_world.css" type="text/css"/>
    <link rel="stylesheet" href="css/normalize.css" type="text/css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://use.fontawesome.com/cb74638127.js"></script>
        <script language="javascript" type="text/javascript">
var messages = document.getElementById("messagesBox");
messages.style.display = "none";

var buttonShowMessages = document.getElementById("showMessages");
var buttonHideMessages = document.getElementById("hideMessages");

buttonHideMessages.style.display = "none";

buttonShowMessages.addEventListener("click", showMessages);
buttonHideMessages.addEventListener("click", hideMessages);


function showMessages(){
        var messages = document.getElementById("messagesBox");
    var buttonShowMessages = document.getElementById("showMessages");
    var buttonHideMessages = document.getElementById("hideMessages");
    
    messages.style.display = "block";
    
    buttonShowMessages.style.display = "none";
    buttonHideMessages.style.display = "block";
}

function hideMessages(){
        var messages = document.getElementById("messagesBox");
    var buttonShowMessages = document.getElementById("showMessages");
    var buttonHideMessages = document.getElementById("hideMessages");
    
     messages.style.display = "none";
    
    buttonShowMessages.style.display = "block";
    buttonHideMessages.style.display = "none";
}
</script> 
    
</head>

<body>

    <button id="showMessages">Show Message</button>
    <button id="hideMessages">Hide Message</button>
    
    <section id="messagesBox">
    <p>Hallo das ist eine Kommentar-box.</p>
    </section>
</body>

Alles anzeigen

Bild:

Spoiler anzeigen

[Blockierte Grafik: http://thumbs.picr.de/30767420op.jpg]

Stef

Hey,

du musst erstmal warten bis die komplette Seite geladen ist. Erst wenn die Seite komplett geladen ist sind die html elemente usw. vorhanden.

Du musst window.onload = function(){} hinzufügen.

JavaScript

window.onload = function(){

    var messages = document.getElementById("messagesBox");
    messages.style.display = "none";

    var buttonShowMessages = document.getElementById("showMessages");
    var buttonHideMessages = document.getElementById("hideMessages");
    buttonHideMessages.style.display = "none";
    buttonShowMessages.addEventListener("click", showMessages);
    buttonHideMessages.addEventListener("click", hideMessages);
    
function showMessages(){
        var messages = document.getElementById("messagesBox");
        var buttonShowMessages = document.getElementById("showMessages");
        var buttonHideMessages = document.getElementById("hideMessages");
    
        messages.style.display = "block";
    
        buttonShowMessages.style.display = "none";
        buttonHideMessages.style.display = "block";
    }
    function hideMessages(){
        var messages = document.getElementById("messagesBox");
        var buttonShowMessages = document.getElementById("showMessages");
        var buttonHideMessages = document.getElementById("hideMessages");
    
         messages.style.display = "none";
    
        buttonShowMessages.style.display = "block";
        buttonHideMessages.style.display = "none";
    }
}

Alles anzeigen

Jetzt mitmachen!