✔ Mehrere sich öffnende DIVS auf einer Seite

[TMM]

Hallo,

da ich ein ziemlicher Anfänger in Sachen JS und AJAX bin (habe bisher JS eigentlich eher gemieden...) hab ich beim ersten einbinden auf meine Seite auch gleich ein Problem(chen).

Und zwar habe ich mehrere sich öffnende Divs (Untermenues), die sich beim entsprechenden Link auf den Menuepunkt öffnen. Sobald allerdings ein Menuepunkt offen ist, muss dieser erst geschlossen werden, damit ein neuer geöffnet werden kann, und genau das möchte ich automatisch haben, d.h. sobald ein USER auf einen anderen Menuepunkt klickt, soll sich zuerst der offene schließen und dann der andere öffnen. hier mal mein bisheriger Code mit der Bitte um Hilfe, wie ich diesen erweitern muss, damit das funktioniert.

<div class="menue"><br/>
        <a class="unterseiten" href="weingut.php" id="weingut">Weingut</a><br/>
        <a class="unterseiten" href="#" id="verwaltung_link">Verwaltung</a><br/>
        <a class="unterseiten" href="#" id="kellerei_link">Kellerei</a><br/>
        <a class="unterseiten" href="#" id="weinkeller">Weinkeller</a><br/>
        <a class="unterseiten" href="#" id="weinlager">Weinlager</a><br/>
        <a class="unterseiten" href="#" id="vinothek">Vinothek</a><br/>
        <a class="unterseiten" href="#" id="gasthaus">Gasthaus</a><br/>
 </div> 

<div id="verwaltung_box">
      <?php include('php/verwaltung.php'); ?>
</div>
       
<div id="kellerei_box">
     <?php include('php/kellerei.php'); ?>
</div>

       <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript">
          $(document).ready(function(){
              $('a#verwaltung_link').click(function(){
              $('div#verwaltung_box').animate({ height: 550, width: 940 }, "slow", function(){});
              })
          });
       </script>
       
       <script type="text/javascript">
          $(document).ready(function(){
              $('a#kellerei_link').click(function(){
              $('div#kellerei_box').animate({ height: 550, width: 940 }, "slow", function(){});
              })
          });
       </script>

 

[Jeremy1]

Hallo TMM,

ich habe deinen Script-Teil etwas erweitert und hoffe das ich dich richtig verstanden habe bzw. das du mit dem Code dein Problem lösen kannst! Aber schaue es dir einfach mal an!

<script type="text/javascript"> 
          $(document).ready(function(){ 
              $('#verwaltung_link').click(function(){ 
              $('#verwaltung_box').animate({ height: 550, width: 940 }, "slow", function(){}); 
              $('#kellerei_box').animate({ height: 100, width: 940 }, "slow", function(){});
              }) 

              $('#kellerei_link').click(function(){ 
              $('#kellerei_box').animate({ height: 550, width: 940 }, "slow", function(){}); 
              $('#verwaltung_box').animate({ height: 100, width: 940 }, "slow", function(){});
              }) 
          }); 
       </script>

Übrigens du brauchst nicht für jeden Code-Teil einen eigenes

<script type="text/javascript"> 
     $(document).ready(function(){ ... }); 
</script>

machen du kannst alles in das gleiche geben!

Lg Jeremy

 

[TMM]

Hallo Jeremy,

danke für Deine Antwort.
Leider wird so das DIV Verwaltung nur kurz angezeigt, danach erscheint sofort das DIV Kellerei...
Naja werde mal noch etwas rumprobieren

 

[TMM]

Habe das Problem nun mit einer Klasse gelöst, hier der funktonierende Code:

<div class="menue"><br/>
        <a class="unterseiten" href="weingut.php" id="weingut">Weingut</a><br/>
        <a class="unterseiten" href="#" id="verwaltung_link">Verwaltung</a><br/>
        <a class="unterseiten" href="#" id="kellerei_link">Kellerei</a><br/>
        <a class="unterseiten" href="#" id="weinkeller_link">Weinkeller</a><br/>
        <a class="unterseiten" href="#" id="weinlager_link">Weinlager</a><br/>
        <a class="unterseiten" href="#" id="vinothek_link">Vinothek</a><br/>
        <a class="unterseiten" href="#" id="gasthaus_link">Gasthaus</a><br/>
        
       </div> 
       
       <div id="verwaltung_box">
        <?php include('php/verwaltung.php'); ?>
       </div>
       
       <div id="kellerei_box">
        <?php include('php/kellerei.php'); ?>
       </div>
       
       <div id="weinkeller_box">
        <?php include('php/weinkeller.php'); ?>
       </div>
       
       <div id="weinlager_box">
        <?php include('php/weinlager.php'); ?>
       </div>
       
       <div id="vinothek_box">
        <?php include('php/vinothek.php'); ?>
       </div>
       
       <div id="gasthaus_box">
        <?php include('php/gasthaus.php'); ?>
       </div>
       
       <script type="text/javascript" src="js/jquery.js"></script>
       <script type="text/javascript">
          $(document).ready(function(){
              $('a#verwaltung_link').click(function(){
              $('.OPEN').hide();
              $('.OPEN').removeClass('OPEN');
              $('div#verwaltung_box').show({ height: 550, width: 940 });
              $('div#verwaltung_box').addClass('OPEN');  
              })
          
              $('a#kellerei_link').click(function(){
              $('.OPEN').hide();
              $('.OPEN').removeClass('OPEN');
              $('div#kellerei_box').show({ height: 550, width: 940 });
              $('div#kellerei_box').addClass('OPEN');  
              })
          
              $('a#weinkeller_link').click(function(){
              $('.OPEN').hide();
              $('.OPEN').removeClass('OPEN');
              $('div#weinkeller_box').show({ height: 550, width: 940 });
              $('div#weinkeller_box').addClass('OPEN');
              })
          
              $('a#weinlager_link').click(function(){
              $('.OPEN').hide();
              $('.OPEN').removeClass('OPEN');
              $('div#weinlager_box').show({ height: 550, width: 940 });
              $('div#weinlager_box').addClass('OPEN');
              })
          
              $('a#vinothek_link').click(function(){
              $('.OPEN').hide();
              $('.OPEN').removeClass('OPEN');
              $('div#vinothek_box').show({ height: 550, width: 940 });
              $('div#vinothek_box').addClass('OPEN');
              })
          
              $('a#gasthaus_link').click(function(){
              $('.OPEN').hide();
              $('.OPEN').removeClass('OPEN');
              $('div#gasthaus_box').show({ height: 550, width: 940 });
              $('div#gasthaus_box').addClass('OPEN');
              })
          });
               
          
       </script>