onclick Text anzeigen/verbergen

Jim · 15. November 2019

Moin zusammen,

ich möchte gerne, dass verschiedene Daten ausgegeben werden, wenn man auf die entsprechende Jahreszahl klickt. Ich habe dafür unten stehendes Script gefunden. Es funktioniert auch soweit nur hätte ich gerne, dass die Daten versteckt sind, bevor ich sie anklicke. Wie geht das?

Code

<body>
    <div id="header">
        <nav class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
  <?PHP
  include("inc/menue.inc");
  ?>
      </div>
    </nav>
    <div class="container-fluid"> 
        <div id="logo"> 
            <h1><img src="images/logo.png"></h1> 
        </div>
        </div>
    </div>
<div class="container">
    <div class="row">
        <div class="col-md-9">
            <h2>Termine</h2>
            <p class="unterschrift">nachfolgend einige interessante Termine bei denen ihr uns antreffen k&ouml;nnt. </p>
                
                <p onclick="achtzehn()">2018</p>
                <ul id="ah">
                <li>17.05.2018 - 20.05.2018 &#10147; Treffen 1<font color=#80FF00>&#10003;</font></li>
                <li>22.06.2018 - 24.06.2018 &#10147; Treffen 2<font color=#80FF00>&#10003;</font></li>
                <li>13.07.2018 - 15.07.2018 &#10147; Treffen 3<font color=#80FF00>&#10003;</font></li>
                <li>17.08.2018 - 19.08.2018 &#10147; Treffen 4<font color=#80FF00>&#10003;</font></li>
                <li>30.09.2018 &#10147; Treffen 5 <font color=#80FF00>&#10003;</font></li>
                <li>17.11.2018 &#10147; Treffen 6</li>
                <li>08.12.2018 &#10147; Treffen 7</li>
                </ul>
                
                <p onclick="neunzehn()">2019</p>
                <ul id="ai">
                <li>06.06.2019 - 09.06.2019 &#10147; Treffen 8</li>
                <li>04.07.2019 - 07.07.2019 &#10147; Treffen 9</li>
                </ul>
        </div>
  <?PHP
  include("inc/neu.inc");
  ?>                          
  </div>
  <?PHP
  include("inc/unten.inc");
  ?>                   
  </div>
  <?PHP
  include("inc/schluss.inc");
  ?>  
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>  
   
    <script>
function achtzehn() {
  var x = document.getElementById("ah");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
    
    <script>
function neunzehn() {
  var x = document.getElementById("ai");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>    
</body>

Alles anzeigen

danke schon mal,

Jim

basti1012 · 16. November 2019

wie wäre es mit display:none; in der css ?

Code

<style>
  #ai,#ah{
  display:none;
}
</style>

Man könnte das Script aber auch anders machen, finde die Variante nicht so optimal.

Auch das HTML mit dem Inline Style ist veraltet. Warum nutzt du keine Ä,Ö,Ü ??

Ich würde das alles so machen und mehr Klassen nutzen

* Link entfernt , weil existiert nicht mehr *

Der vorteil ist das du so immer mehr Jahreszeiten hinzufügen kannst und nix mehr an Javascript ändern müsste.

Dein Inline style ist auch weg , das macht den Code nur unübersichtlicher

Jim · 16. November 2019

Moin Basti,

danke so funktioniert es.

Ich habe getrennte css-dateien, muss mal gucken, wie ich es da unter bekomme. Ansonsten eine super Idee.

Gruß Jim

onclick Text anzeigen/verbergen

Jetzt mitmachen!

Teilen

Tags