[Erledigt] Probleme mit Code

[Forumsgast]

Ich hab ein kleines Problem mit meinem selbstversuch und dem hier gezeigtem Code:

<?php
 
session_start();
 
// Dieses Array dient gleichzeitig zur Validierung gültiger Zustände
// wie auch zum Zuordnen des Gegenzustands
$states = array(
               'visible' => 'hidden' ,
               'hidden' => 'visible' ,
               );
 
 
// Ajax detektieren
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
   $_SERVER['HTTP_X_REQUESTED_WITH']=== 'XMLHttpRequest') {
 
    if(in_array ($_GET['display'] , $states)) {
        $_SESSION['display'] = $_GET['display'];
    }
    else {
        unset ($_SESSION['display']);
    }
    echo $_SESSION['display'];
    exit;
}
 
 
 
if (! empty ($_GET['display'])) {
  // wir nehmen nur 'visible' oder 'hidden an
  if(in_array ($_GET['display'] , $states)) {
      $display = $_GET['display'];
  }
}
// Initialsetting oder ungültige GET-Angaben
if (! isset ($display)) {
    if(isset($_SESSION['display'])) {
        $display = $_SESSION['display'];
    }
    else {
        $display = 'visible'; // dies ist jetzt der Initialzustand
    }
}
 
$link = '?display=' . $states[$display]; // Gegenteil in den Link
?>
...
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
 
  $(function () {
    $('a#tgglBox').click (function (){
      var class=$('#box').hasClass('visible')?'hidden':'visible';
      $.ajax({data:{display:class}});
      $('#box').toggleClass('visible');
      $('#box').toggleClass('hidden');
      return false;
    });
  });
  
    $(function () {
    $('a#test').click (function (){
      var class=$('#aa').hasClass('visible')?'hidden':'visible';
      $.ajax({data:{display:class}});
      $('#aa').toggleClass('visible');
      $('#aa').toggleClass('hidden');
      return false;
    });
  });
 
</script>
<style>
  .hidden {display:none;}
  .visible {display:block;}
</style>
 
...<br>
<br>

 
<a id="tgglBox" href="<?php echo $link; ?>">Click me!</a><br>
<div id="box" class="<?php echo $display; ?>">Here ist some content for you!</div><br>
<br>
<a id="test" href="<?php echo $link; ?>">Click me!</a><br>
<div id="aa" class="<?php echo $display; ?>">Here ist some content for you!</div><br>
<br>

Aktuell verstehe ich noch nicht wirklich wie ich meherer Elemente ein oder Ausblenden kann...
Was natürlich funktioniert, ist den Code doppelt zu schreiben:

  $(function () {
    $('a#tgglBox').click (function (){
      var class=$('#box').hasClass('visible')?'hidden':'visible';
      $.ajax({data:{display:class}});
      $('#box').toggleClass('visible');
      $('#box').toggleClass('hidden');
      return false;
    });
  });
  
    $(function () {
    $('a#test').click (function (){
      var class=$('#aa').hasClass('visible')?'hidden':'visible';
      $.ajax({data:{display:class}});
      $('#aa').toggleClass('visible');
      $('#aa').toggleClass('hidden');
      return false;
    });
  });

<a id="tgglBox" href="<?php echo $link; ?>">Click me!</a><br>
<div id="box" class="<?php echo $display; ?>">Here ist some content for you!</div><br>
<br>
<a id="test" href="<?php echo $link; ?>">Click me!</a><br>
<div id="aa" class="<?php echo $display; ?>">Here ist some content for you!</div><br>
<br>

Vermutlich ist dies jedoch der falsche weg... und hoffe es kann mir jemand helfen

[Forumsgast]

Du könntest den divs ja eine gleiche id geben, die du mit einer laufenden Nummer ergänzt. Dann müßtest du beim Link die nummer mit übergeben und somit das gewünschte div bestimmen.

<a id="tgglBox1" href="<?php echo $link; ?>">Click me!</a><br> <div id="box1" class="<?php echo $display; ?>">Here ist some content for you!</div><br> <br> <a id="tgglBox2" href="<?php echo $link; ?>">Click me!</a><br> <div id="box2" class="<?php echo $display; ?>">Here ist some content for you!</div><br> <br>