[JavaScript] Show / hide Opcje

[Adis92]

Witam.
Próbuję zrobić chowanie i pokazywanie boxa wzajemnie na siebie oddziaływające . Skrypt, który znalazłem w internecie w pewnym stopniu udało mi się przekstałcić na moje potrzeby lecz problem jest taki że działa tylko pierwszy box, a reszta nie odpowiada.
Skrypt wziąłem z tej strony: http://www.webdesignerwall.com/demo/jquery/accordion1.html.
Chcę aby po naciśnięciu na div news_hidden on się chował, a pokazywał się div news_active znajdujący się pod nim i chował się poprzednio otwarty div news_active i pokazywał wcześniej ukryty div news_hidden.
Mój plik wygląda następująco:

Kod

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    $("#news #news_active:first").addClass("active");
    $("#news #news_hidden:first").hide();
    $("#news #news_hidden:not(:first)").hide();

    $("#news #news_hidden").click(function(){
        $(this).next("#news_active").slideToggle("slow")
        .siblings("#news_active:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).hide();
        $(this).siblings("#news_hidden").removeClass("active");
    });

});
</script>

[HTML] pobierz, plaintext 
<div id="news">
            <!-- Skrypt działa tylko na te 2 boxy -->
            <div id="news_hidden">
                     <!-- ukryty box -->
            </div>
            <div id="news_active">
                     <!-- aktywny box -->
            </div>
           <!-- Tutaj przestaje działać na resztę boxów -->
            <div id="news_hidden">
                     <!-- aktywny box -->
            </div>
            <div id="news_active">
                     <!-- ukryty box -->
            </div>
            <div id="news_hidden">
                     <!-- aktywny box -->
            </div>
            <div id="news_active">
                     <!-- ukryty box -->
            </div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował Adis92 7.12.2012, 22:34:32

[b4rt3kk]

Musisz mieć jakiś punkt zaczepienia, tzn. wykorzystać DOM. O ile dobrze zrozumiałem Twój problem. Kod HTML:

[HTML] pobierz, plaintext 
<div id="news">
            <!-- Skrypt działa tylko na te 2 boxy -->
<div class="parentNod">
            <div id="news_hidden">
                     <!-- ukryty box -->
            </div>
            <div id="news_active">
                     <!-- aktywny box -->
            </div>
</div>
           <!-- Tutaj przestaje działać na resztę boxów -->
<div class="parentNod">
            <div id="news_hidden">
                     <!-- aktywny box -->
            </div>
            <div id="news_active">
                     <!-- ukryty box -->
            </div>
</div>
<div class="parentNod">
            <div id="news_hidden">
                     <!-- aktywny box -->
            </div>
            <div id="news_active">
                     <!-- ukryty box -->
            </div>
</div>
</div>
[HTML] pobierz, plaintext 

a teraz jQuery:

[HTML] pobierz, plaintext 
$(function() {
 
  $('.parentNod div').click(function() {
    $(this).closest('.parentNod').children('div').each(function() {
      if ($(this).is(":visible") == true) $(this).hide(); else $(this).show();
    });
  });
 
});
[HTML] pobierz, plaintext 

[Adis92]

Rozumiem o co chodzi z tym zaczepieniem. Tylko przyznam że na js się nie znam i nie bardzo wiem gdzie wstawić tą funkcję.

[b4rt3kk]

Rozumiem o co chodzi z tym zaczepieniem. Tylko przyznam że na js się nie znam i nie bardzo wiem gdzie wstawić tą funkcję.

Pomiędzy znaczniki <script>...</script> i to wszystko, powinno działać.

[Pawel_W]

ludzie, id jest po to, żeby używać go tylko raz...

[Adis92]

Użyłem Twojego skryptu i działa tylko chciałbym żeby po tym jak się otwiera nowy div .news_active i jest otwarty inny div .news_active to żeby ten otwarty się zamykał i pokazywał jego div .news_hidden.

Kod

            <script>
                $(function() {
                    $(".news_active:first").show();
                    $(".news_hidden:first").hide();
    
                      $('.parentNod .news_hidden').click(function() {
                        $(this).closest('.parentNod').children('div').each(function() {
                              if ($(this).is(":visible") == true)
                                $(this).slideUp("slow");
                            else
                                $(this).slideToggle("slow");
                        });
                      });
                
                });
            </script>

Ten post edytował Adis92 9.12.2012, 14:53:10

[b4rt3kk]

ludzie, id jest po to, żeby używać go tylko raz...

Słuszna uwaga, musisz zmienić id na class. Później zastosować ukrywanie / pokazywanie obiektu dla wszystkich obiektów danej klasy.

[Adis92]

Słuszna uwaga, musisz zmienić id na class. Później zastosować ukrywanie / pokazywanie obiektu dla wszystkich obiektów danej klasy.

Zmieniłem na class już. Ale jak zastosować ukrywanie / pokazywanie obiektu dla wszystkich obiektów danej klasy? Bo nie bardzo wiem jak to zrobić.