2 divs gleichzeitig ausblenden bzw einblenden

orangeede · 27.02.2010

hallo zusammen
ich hab schon ne ganze zeitlang gegoogelt aber irgendwie find ich nich des richtige

folgendes
ich habe auf meiner seite (EDE Sound & Design) eine bildergalerie bei dem jedes bild sich in einem div befindet der sich auf der seite verschieben lässt.
da die bilder jetzt immer mehr werden würd ich se gern unterteilen

nun
bräuchte ich ein script/funktion um mehrere divs gleichzeitg ein- und auszublenden. ich hab schon bestimmt 20 gefunden die mit hide, show oda toggle einzelne divs verstecken aber eben immer nur einen.

ich hoff ihr könnt mir da weiter helfen

gruß EDE

Triggertrix · 27.02.2010

AW: 2 divs gleichzeitig ausblenden bzw einblenden

also bei Deiner eigentlichen Frage kann ich Dir gaaaaaanz sicher nicht weiter helfen.... aber warum machst Du nicht verschiedene Sites, also Unterkategorien, wenn es jetzt mehr Bilder werden? Kann dann doch keiner mehr was erkennen wenn das so ein gewurschtel wird....und die Ladezeit dürfte auch besser werden, was ja auch ein Thema ist.....

Also nur mal als Idee

pac_nrw · 27.02.2010

AW: 2 divs gleichzeitig ausblenden bzw einblenden

Hi,
ich denke du willst die divs mit Javascript ein- bzw. ausblenden. Dazu musst du halt nur über einen Button eine Funktion aufrufen.

Bsp:

function einblenden() {
document.getElementById("DIV1").display=none;
document.getElementById("DIV2").display=block;
}

in dem Button stehht dann onClick="einblenden()"

VG
Pac

sokie · 27.02.2010

AW: 2 divs gleichzeitig ausblenden bzw einblenden

wenn du scripts gefunden hast, die element per hide() ausblenden, bist du wahrscheinlich schon bei den JS-Frameworks, wie zB jQuery angekommen.
da leigts dann einfach nur am Selektor,welche und wieviele Elemente man gleichzeitig ein oder ausblendet.

Code:

$(".inOut").hide();

versteckt alle elemente, die die class="inOut" haben - egal wie viele das sind.

orangeede · 27.02.2010

AW: 2 divs gleichzeitig ausblenden bzw einblenden

ok schon mal danke

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>jQuery - Show and Hide Div-Container</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('button').click(function() {
          $('#container1','#container2').toggle();
          return false;
        });
      });
    </script>
    
  </head>
  <body>
 
    <button>Show me</button> 
 
    <div style="display:none;background-color: blue;" id="container1">
     <p>Anzeige</p>
    </div>
     <div style="display:none;background-color: blue;" id="container2">
     <p>Anzeige</p>
    </div> 
  </body>
</html>

aber funktionieren tuts bei mir trotzdem nicht =(
weiß jemand was da noch falsch is oda ob des überhaupt möglich is

orangeede · 27.02.2010

AW: 2 divs gleichzeitig ausblenden bzw einblenden

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>jQuery - Show and Hide Div-Container</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('.button').click(function() {
          $('.inout').toggle('slow');
          return false;
        });
      });
       $(document).ready(function(){
          $('.button2').click(function() {
          $('.inout2').toggle('slow');
          return false;
        });
      });
    </script>

  </head>
  <body>
 
    <a href="#" class="button">Show me12</a> <a href="#" class="button2">Show me34</a> 
 
    <div style="display:none" class="inout" id="container1">
     <p>Anzeige</p>
    </div>
  <div style="display:none" class="inout" id="container2">
     <p>Anzeige2</p>
    </div>
    
    
    
     
 
    <div style="display:none" class="inout2" id="container1">
     <p>Anzeige4</p>
    </div>
  <div style="display:none" class="inout2" id="container2">
     <p>Anzeige3</p>
    </div>
  </body>
</html>

ok sorry falsch gelesen jetzt klappts =)
danke

saila · 28.02.2010

AW: 2 divs gleichzeitig ausblenden bzw einblenden

orangeede schrieb:

ok schon mal danke

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>jQuery - Show and Hide Div-Container</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $('button').click(function() {
          $('#container1','#container2').toggle();
          return false;
        });
      });
    </script>
    
  </head>
  <body>
 
    <button>Show me</button> 
 
    <div style="display:none;background-color: blue;" id="container1">
     <p>Anzeige</p>
    </div>
     <div style="display:none;background-color: blue;" id="container2">
     <p>Anzeige</p>
    </div> 
  </body>
</html>

aber funktionieren tuts bei mir trotzdem nicht =(
weiß jemand was da noch falsch is oda ob des überhaupt möglich is

Code:

<script type="text/javascript">
      $(document).ready(function() {
          $('button').click(function() {
           $('#container1, #container2').toggle();
        });
      });
</script>

Bewirkt, dass die per Selector angesprochenen Elemente per CSS eine Klasse enthalten welche "display: none;" beinhaltet. Per toggle wird den div-boxen ein style="display: block;" hinzugefügt.

Das ganze kannst du auch über jQuery: The Write Less, Do More, JavaScript Library in der Dokumentation nachlesen bzw. auch per Exemplar testen. Ist unter Event zu finden.