Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Witam,

mam taką strukturę

<div class="form-box">

    <input type="radio" class="chbox"><div class="hidden-box"></div>

</div>



<div class="form-box">

    <input type="radio" class="chbox"><div class="hidden-box"></div>

</div>



<div class="form-box">

    <input type="radio" class="chbox"><div class="hidden-box"></div>

</div>



... itd

jak poprzez $(".form-box .chbox").click(function() {}

wywołać ("hidden-box").toggle() dla ".form-box" w którym dany input się znajduje. zrobiłem to przy użyciu id i działa, ale zastanawiam się czy można bez.

Maciek

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

spróbuj
$(this).next("div").toggle();
lub
$(this).parents().next("div").toggle();

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Tomasz Pyśko:
spróbuj
$(this).next("div").toggle();
lub
$(this).parents().next("div").toggle();

tego już próbowałem, niestety nie działa u mnie...

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Czy o to chodzi?

http://jsfiddle.net/h6GXk/

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Tobiasz Glazar:
Czy o to chodzi?

http://jsfiddle.net/h6GXk/

dokładnie!

czyli mam coś u siebie bo nie chce mi działać.

Dzięki Panowie za pomoc

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Czy możecie mi jeszcze powiedzieć gdzie robię błąd?

Struktura:

<div class="form">

<h2 class="form-open-box">Link1</h2>

<div class="form-box">Tresc</div>

</div>



<div class="form">

<h2 class="form-open-box">Link2</h2>

<div class="form-box">Tresc</div>

</div>



...itd

I moj skrypt:

 

$(".form h2.form-open-box").click(function() {

   

   $('.form-box').slideUp('fast').hide();

   

   $(this).next('.form-box').slideDown('slow').show();

   $(this).removeClass('form-open-box').addClass('form-close-box');



     $(".form h2.form-close-box").click(function() {

        $(this).next('.form-box').slideUp('fast').hide();

	$(this).removeClass('form-close-box').addClass('form-open-box');

	});

});

Pomysł jest taki że po kliknięciu rozsuwa się ".form-box" i zmienia klasa h2. Po powtórnym kliknięciu wszystko wraca do stanu początkowego. Dodatkowo kliknięcie w h2 zamyka wszystkie ".form-box" po czym otwiera tylko tego którego ma pod sobą. Problem w tym że działa mi to tylko przy pierwszym "przelocie". Gdy klikam więcej razy coś się chrzani.

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Ja widzę że kolega chyba chce tu zrobić prosty mechanizm, który stosuje się najczęściej na stronach typu FAQ.
Niestety opcja z dorzucaniem dynamicznie klasy i później posługiwania się tą klasą przez jquery nie przejdzie.

Podrzucam coś co jakiś czas temu pisałem:

<!-- toggles -->

<div class="toggles">

    

    <ul>

        <li>

            <a href="#">Click on this title to show/hide it's content</a>

            <p class="">

                This is tab 1. Aliquam porttitor metus felis. Curabitur euismod porta justo ut mattis. Mauris condimentum ultrices justo, ac suscipit leo tempor eget. 

            </p>

        </li>

        <li>

            <a href="#">Click on this title to show/hide it's content</a>

            <p class="">

                This is tab 2. Aliquam porttitor metus felis. Curabitur euismod porta justo ut mattis. Mauris condimentum ultrices justo, ac suscipit leo tempor eget. 

            </p>

        </li>

        <li>

            <a href="#">Click on this title to show/hide it's content</a>

            <p class="">

                This is tab 3. Aliquam porttitor metus felis. Curabitur euismod porta justo ut mattis. Mauris condimentum ultrices justo, ac suscipit leo tempor eget. 

            </p>

        </li>

        <li>

            <a href="#">Click on this title to show/hide it's content</a>

            <p class="">

                This is tab 4. Aliquam porttitor metus felis. Curabitur euismod porta justo ut mattis. Mauris condimentum ultrices justo, ac suscipit leo tempor eget. 

            </p>

        </li>                                                                                    

        

    </ul>

</div>

<!-- //toggles -->

/* toggles */

$(".toggles > ul > li > a").click(function(){

	$(this).parent().parent().children().children("a").removeClass("current");

	$(this).parent().parent().find("p").slideUp("normal");

	if($(this).hasClass("current")){

	$(this).parent().find("p").slideUp("normal");

	$(this).removeClass("current");

	}

	else {

	$(this).parent().find("p").slideDown("normal");

	$(this).addClass("current");

	}

	return false;

});

.toggles ul li p {display:none;}

.toggles ul li p.current {display:block;}

aha i staraj się tak nie pisać: slideDown('slow').show(); - bo jedno konstrukcyjnie troszkę się kłóci z drugim: robisz slidedown by coś pokazać a zaraz po tym jeszcze proste show() - czyli dwa razy prawie to samoArtur Kwiatkowski edytował(a) ten post dnia 18.10.11 o godzinie 21:31

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Artur Kwiatkowski:

Dzięki za odpowiedz. Zaraz to zobaczę i popróbuje.

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Taki przykład na szybko bazujący na Twoim kodzie:
http://jsfiddle.net/3p3XS/2/

Mam nadzieję, że komentarze się na coś przydadzą...

Temat: Wywołanie show/hide dla divów w takich samych boxach bez...

Waldek Mazurek:
Taki przykład na szybko bazujący na Twoim kodzie:
http://jsfiddle.net/3p3XS/2/

Mam nadzieję, że komentarze się na coś przydadzą...

extra dzieki.