Wie kann sich durch Javascript/HTML der Bereich A beim Aufklappen von Bereich B automatisch schließen, siehe CodeBSP?

Von Seitenanfang bis Head-Ende habe ich folgendes stehen, die spitzen klammern wurden im CodeBSP nicht angezeigt, stattdessen solch ein unverständlicher "& l t ;"-Quatschsinn:

html
    head
        title
            Meine Geichte-Bibliothek
        /title

        script type="text/javascript"
            function toggle(id){
                var e = document.getElementById(id);

                if (e.style.display == "none"){
                  e.style.display = "";
                } else {
                  e.style.display = "none";
                }
            }
        /script
    /head

Und folgendes CodeSP habe ich im BODY stehen:

a href="javascript:toggle('f0100')" I. Gedichte von Goethe /a  div id="f0100" style="display: none"

a href="javascript:toggle('f0101')" 01. Epirrhema /a  div id="f0101" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0102')" 02. Gefunden /a  div id="f0102" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0103')" 03. Erlkönig /a  div id="f0103" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0104')" 04. Das Göttliche /a  div id="f0104" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0105')" 05. Heydenröslein /a  div id="f0105" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0106')" 06. Osterspaziergang /a  div id="f0106" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0107')" 07. Prometheus /a  div id="f0107" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0108')" 08. Selige Sehnsucht /a  div id="f0108" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0109')" 09. Verschwiegenheit /a  div id="f0109" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0110')" 10. Willkommen und Abschied /a  div id="f0110" style="display: none" Text folgt /div  br
a href="javascript:toggle('f0111')" 11. Zauberlehrling /a  div id="f0111" style="display: none" Text folgt /div  br

/div

Viele aufklappbare Gedichte stehen unter einem aufklappbaren Titel, dem Namen des jeweiligen Verfassers, wie Goethe, Schiller, Lessing usw. Wie kann ich es bewerkstelligen, dass sich beim Öffnen von Schiller der Bereich Goethe automatisch schließt, ohne auf irendwelcherlei externe .js-Dateien verlinken zu müssen? Ich gestehe, dass ich gewissermaßen, zumindest was JS-Belange angeht, eher ein ScriptKiddie bin. Ich habe auch einiges über Hover, also Drübergleiten mit Maus gelesen, aber um euch gegenüber ehrlich zu sein nur Bahnhof und Bratkartoffeln verstanden :(

Das habe ich denn nun davon, dass unser Informatik-Lehrer damals nur immer über Ufos und Verschörungstheorien fabulierte, anstatt uns handfesten Unterrichtsstoff über Javascript, jQuery und PHP einzuprügeln .. :// .. sniff

Falls mir jemand leicht erklärlich / verständlich da bei diesem Code helfen könnte, würde mich das wirklich S E H R freuen.

Liebe Grüße und ein schönes Wochenende.

@-}-}--- Matthias :)

5 Antworten

maximilianus7

Nutzer, der sehr aktiv auf gutefrage ist

im Thema programmieren

06.03.2016, 17:08

ich vermute, dass, wenn goethe aufgeklappt ist und du schiller wählst, dass goethe aufgeklappt bleibt. du müsstest also zusätzlich display=none auf goethe anwenden.

also: das letzte "offene" objekt in einer globalen variablen merken und die vor dem aktuellen toggeln "schliessen".

grtgrt

06.03.2016, 14:49

Dies zu erreichen, musst du JavaScript nutzen,

am besten durch Einbinden der Bootstrap Bibliothek -

siehe das Beispiel auf Seite http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h .

http://www.w3schools.com/bootstrap/bootstrap_collapse.asp

Die beste Antwort könnte in den restlichen 3 Antworten stecken - registriere Dich jetzt!

Ähnliche Beiträge

JavaScript: Ajax: Weiterleitung bei success?

ich habe ein normales HTML-form und ajax dahinter mit einer div wo text ausgegeben wird. bei Erfolg soll jetzt aber eine weiterleitung stattfinden, wie mach ich das ? einfach mit header in der php-datei geht ja nicht...

...zum Beitrag

Mit Javascript html tag löschen?

Beispiel:

ich bin auf irgendeiner seite

und mir passt irgendein div nicht.

macht zwar keinen sinn aber egal.

der div hat die id=„test“.

wie kann ich jz dafür sorgen mit javascript das der div verschwindet ?

könnte zwar den text der da drinne steht löschen aber dann wäre der Div noch innerhalb vom Body.

Oder auch die farbe transparent machen mit css dann würde man ihn nichtmehr sehen.

RemoveChild hat bei mir nicht funktioniert, wahrscheinlich hab ich das falsch geschrieben/ was falsches gegoogelt

...zum Beitrag

JavaScript Textboxen die aufklappen

Kann kein JavaScript. Kann man das vielleicht so umschreiben, dass es möglich wird, in den Link auch noch etwas anderes rein zu schreiben als wie die Wörter die in dem Script abgeglichen werden. Also "[Aufklappen]" und "[Schliessen]" ...

Ich will halt, dass man auf der ganzen div-box, die um den Link liegt, drauf klicken kann..

var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) {
return document.all[id];
} else {
return document.getElementById(id);
}
}
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '[Aufklappen]') {
link.innerHTML = '[Schliessen]'; d.style.display = 'block';
} else { link.innerHTML = '[Aufklappen]'; d.style.display = 'none';
}
}




<div>
    <div>
        <a href="javascript: void(0);" onClick="toggle(this, 'box1');">[Aufklappen]</a>
    </div>
    <div id="box1" style=display:none>
        // Inhalt aufgeklappt
    </div>
</div>

...zum Beitrag

Wie kann ich mit JS ein div mit der zugehörigen ID erstellen?

Ich habe das Problem, dass ich mit dem Befehl:

document.getElementById("main_div").innnerHTML = "<div></div>"

ein neues div-Element (auf einer bereits leeren Seite) erstellen möchte. Das hat mit dem obenstehenden Befehl auch gut geklappt. Jetzt wollte ich aber dem div noch eine ID hinzufügen. Das habe ich wie folgt versucht:

document.getElementById("main_div").innnerHTML = "<div id="evaluation"></div>"

Das hat nicht geklappt. Ich gehe davon aus, dass das Problem bei den gedoppelten Anführungsstrichen liegt.

Gibt es dafür eine Lösung?

Danke im Voraus!

...zum Beitrag

Per Buttonklick Inhalt ändern HTML/JAVASCRIPT?

Will, dass man zwischen 2 Inhalten über ein Buttonklick wechseln kann und habe recherchiert und rausgefunden, dass es mit funktion() geht, aber wie kann ich komplette div containers umändern? Kann man dann im Header den ganzen Code reinschreiben, oder muss man das extern auf einer anderen Seite machen? Oder geht es auch anders?

...zum Beitrag

HTML: Zwei Seiten miteinander interagieren lassen?

Hallo,

ich habe ein HTML-Dokument mit einer div, die einen Text enthalten soll, der auf einer anderen mit einem input eingegeben wird. Das heißt, das zwei HTML-Dokumente miteinander interagieren sollen.

Seite 1: In Input wird text "x" eingegeben

Seite 2: text "x" erscheint.

Wie kann ich das möglich machen? Reicht JavaScript dafür aus?

Die Dateien sind lokal im selben Ordner gespeichert.

Vielen Dank im Voraus!

...zum Beitrag

Wie kann ich eine Textzeile oder Passage aus einer txt Datei lesen mit Javascript?

Hallo,

wie kann ich aus einer (Text)datei eine oder mehrere Zeilen auslesen ?

Bsp. Ich erstelle eine Textdatei mit verschiedenen Sätzen. Jedesmal wenn ich auf einen bestimmten Button auf meiner Homepage klicke, möchte ich das ein anderer Satz aus der Textdatei in einem div oder p tag angezeigt wird.

Ps.: der Text muss nicht unbedingt in einer dat.txt gespeichert werden.

Mfg

...zum Beitrag

JavaScript Maximalwert setzen und schneller Value-Wechsel?

Hallo zusammen,

ich habe folgenden +/- Increment und Decrement Button. Kann ich dort einen Maximalwert setzen?

Außerdem möchte ich gerne wenn man + bzw. - gedrückt hält den Value schneller wechseln kann. Wie ist das möglich?

Vorab danke für die Antworten!

HTML:

 <div class="wrapper">
   <span class="minus">-</span>
   <span class="num">01</span>
   <span class="plus">+</span>
</div>

CSS:

.wrapper{
 height: 120px;
 min-width: 380px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #FFF;
 border-radius: 12px;
 box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
 width: 100%;
 text-align: center;
 font-size: 55px;
 font-weight: 600;
 cursor: pointer;
 user-select: none;
}
.wrapper span.num{
 font-size: 50px;
 border-right: 2px solid rgba(0,0,0,0.2);
 border-left: 2px solid rgba(0,0,0,0.2);
 pointer-events: none;
}

JavaScript:

const plus = document.querySelector(".plus"),
   minus = document.querySelector(".minus"),
   num = document.querySelector(".num");
   let a = 1;
   plus.addEventListener("click", ()=>{
     a++;
     a = (a < 10) ? "0" + a : a;
     num.innerText = a;
   });
   minus.addEventListener("click", ()=>{
     if(a > 1){
       a--;
       a = (a < 10) ? "0" + a : a;
       num.innerText = a;
     }
   });

...zum Beitrag

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zum Beitrag

Html/CSS/Javascript Website Bild wird nicht angezeigt?

Hi, will dass das erste Bild direkt angezeigt wird und das der Beispieltext rechts steht. Wegen Zeichen kurz gehalten. Danke!

<div class="mySlides" id="expandedImg">
<img src="bilder/schuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/schönschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/mann.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/lederschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/basketball.jpg" style="width:35%">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="bilder/schuh.jpg" style="width:90%" onclick="currentSlide(1)" alt=""></div>
<div class="column">
<img class="demo cursor" src="bilder/schönschuh.jpg" style="width:90%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/mann.jpg" style="width:90%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/lederschuh.jpg" style="width:90%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/basketball.jpg" style="width:90%" onclick="currentSlide(5)" alt="">
</div>
</div>
</div> 
<div class="text">
<a>Beispieltext</a>
<p>Beispieltext...</p>
</div>
* {box-sizing: border-box;}
.container {
position: relative;
margin-top: 80px;
}
.mySlides {
display: none;
margin-bottom: -45px;
margin-top: 65px;
margin-left: 10px;}
.cursor {cursor: pointer;}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 300px;
width: auto;
padding: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}
.next {
right: 0;border-radius: 3px 0 0 3px;} 
.prev:hover,
.next:hover {background-color: rgba(211, 211, 211, 0.8);}
.caption-container {text-align: center; background-color: rgb(255, 255, 255);color: white;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 7%;}    
.demo {opacity: 0.6;}
.active,
.demo:hover {opacity: 1;}
.row {margin-top: 65px; margin-left: 10px;}
.text {display: flex; justify-content: flex-end; width: 40%;}
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;}

...zum Beitrag

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zum Beitrag

Über PHP HTML Quellcode auslesen und in Variable speichern?

Hallo,

Kennt jemand eine Möglichkeit wie ich mit PHP einen bestimmten Teil HTML Quellcode aus der gerade geöffneten Seite/oder generell aus einer Datei auslesen kann und diesen dann als Text in einer ganz normalen PHP Variablen speichern kann.

Mit bestimmten Teil meine ich zum Beispiel alles was in einem Element wie einem div mit einer bestimmten id steht.

Zum Beispiel dieser HTML Code:

<body>
  <div id="Div1">
      <h1> Nicht dieses Div </h1>
  </div>

  <div id="Div2">
      <h1> Dieses Div </h1>
  </div>

  <div id="Div3">
      <h1> Nicht dieses Div </h1>
  </div>
</body>

Wenn ich dann den Inhalt von Div2 in eine PHP Variable schreiben wil soll in der Variable: "<h1> Dieses Div </h1>" stehen.

Ich hoffe meine Frage ist verständlich und jemand kennt eine Lösung.

Vielen Dank im voraus :D

...zum Beitrag

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zum Beitrag

Blur mit Javascript entfernen?

Ich habe ein div Element mit CSS "geblurt". Jetzt würde ich den Blur Effekt gerne mittels Javascript mit einem Klick entfernen, sodass man den Text wieder einwandfrei lesen kann. Wie Stelle ich das an?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen