HTML Alternative zum HTML 5 <dialog> Tag

[momdiavlo]

Hi CB`ler,

der HTML 5 <dialog> Tag macht eigentlich genau das, was ich möchte. Allerdings funktioniert dieser nur mit Chrome und Opera, nicht aber mit Firefox, Edge, IE, Safari usw...
Gibt es eine ähnlich einfache Alternative?

Hier ein Beispiel

Vielen Dank schon einmal

 

[TheLastHotfix]

nimm jQuery:

http://www.w3schools.com/jquery/jquery_hide_show.asp

 

[momdiavlo]

Danke, das könnte auch durchaus eine Alternative sein. Jetzt muss ich nur noch rausfinden, ob das auch ohne "Button" geht, also das ein Wort anklickbar ist.

 

[John Reese]

Sicher geht das:

<div id="content">Ich bin der Inhalt, der zu Beginn versteckt ist.</div>
<a href="#" id="trigger">Hallo</a> Welt
<script>
    $(function() {
        $("#trigger").on("click", function(e) {
            e.preventDefault();
            $("#content").toggle();
        });
    });
</script>
<style>
    #content {
        display: none;
    }
</style>

Siehe https://api.jquery.com/toggle/, https://api.jquery.com/on/ (auch wichtig der Abschnitt "The event handler and its environment")

 

[momdiavlo]

@CryNickSystems
Danke!
In der Lernphase erscheinen manchmal die einfachsten Dinge unmöglich.

/Edit
Leider klappt es nicht. Der toggle scheint nicht zu funktionieren, der Text erscheint nicht beim klicken.

 

[John Reese]

Wie "klappt nicht"? Was steht in der Fehlerkonsole? (STRG + SHIFT + J, oder Tab "Konsole" in Firebug bzw. den Browsereigenen Tools).

Klappt hier wunderbar: https://jsfiddle.net/xunjssod/

 

[jurrasstoil]

Ist JQuery für das schlichte Ein- und Ausblenden eines divs nicht irgendwie Overkill?

<script>
function divleinWechselDich() {
	var textDiv = document.getElementById('textContainer');
	
	if (textDiv.style.display == 'none')
		textDiv.style.display = 'block';
	else
		textDiv.style.display = 'none';
}
</script>

<a href="#" onClick="divleinWechselDich();">Klick mich!</a>
<div id="textContainer" style="display: none">Hier steht Text drin</div>

 

[momdiavlo]

@jurrasstoil

Das ist doch mal eine elegante Lösung! Vielen Dank!