[JavaScript] Show/Hide który schować atrybut data Opcje

[Czikusek]

Napisałem sobie prostą listę kategorii: (czy kategorie powinny być na <li> ?)

[HTML] pobierz, plaintext 
<div class="item"><a href="#" title="" data-id="1">1</a></div>
<div class="item"><a href="#" title="" data-id="2">2</a></div>
[HTML] pobierz, plaintext 

chce osiągnąć taki efekt, że po kliknięciu na kategorię pokaże się lista subkategorii do TEJ kategorii, dlatego dodałem znaczniki data.

Później mam listę subkategorii:

[HTML] pobierz, plaintext 
<div class="subcategories-list" data-subcategory="1" style="display: none;">
 
	aaaaaaaaaaaaa
 
</div>
[HTML] pobierz, plaintext 

No i chcę żeby działało:

[HTML] pobierz, plaintext 
$('.maincategories a').click(function(){
			var clicked = $(this).data("id");
			$('.subcategories-list[data-subcategory="'+clicked+'"]').show();
		});
[HTML] pobierz, plaintext 

i działa... rozwija mi listę subkategorii z tym że nie chowa poprzedniej. Jak to zrobić?

Ten post edytował Czikusek 2.08.2018, 12:32:36

[trueblue]

A dlaczego miałoby chować?
Przy kliknięciu najpierw schowaj wszystkie.

[Czikusek]

A jak schować wszystkie? wrzuciłem je w diva .subcategories i w jquery dałem $('.subcategories').hide(); i nie trybi. Nawet wtedy nie pokazuje klikniętej kategorii.

Próbuje zrobić taki efekt jak jest na sprzedajemy.pl

[trueblue]

A dlaczego nie $('.subcategories-list').hide()?

[Czikusek]

O jezu... dobra nie było tematu

To zapytam teraz tak. Mam 4 kategorie w rzędzie:

[kategoria1] [kategoria2] [kategoria3] [kategoria4]
--- tu chciałbym pokazać subkategorie do powyższych
[kategoria5] [kategoria6] [kategoria7] [kategoria8]
--- tu chciałbym pokazać subkategorie do powyższych

Jak to zrobić? nie mam pomysłu

[trueblue]

Pokazać po kliknięciu?
Jeśli kliknę na kategoria6, to zobaczę podkategorie dla tej kategorii oraz kategoria5, kategoria7 i kategoria8?

[Czikusek]

No właśnie tylko że, mam te kategorie główne

[PHP] pobierz, plaintext 
<div class="item"><a href="#" title="" data-id="1">1</a></div>
<div class="item"><a href="#" title="" data-id="2">2</a></div>
<div class="item"><a href="#" title="" data-id="3">3</a></div>
<div class="item"><a href="#" title="" data-id="4">4</a></div>
<div class="item"><a href="#" title="" data-id="5">5</a></div>
<div class="item"><a href="#" title="" data-id="6">6</a></div>
<div class="item"><a href="#" title="" data-id="7">7</a></div>
<div class="item"><a href="#" title="" data-id="8">8</a></div>
[PHP] pobierz, plaintext 

A pod spodem subkategorie. Jak teraz wrzucić pod kategorie 1-4 subkategorie jeśłi sie na nie kliknie?

I dodatkowo jak po kliknięciu jeszcze raz w tą samą kategorie ją schować? bo teraz kliknie - otwiera się, ale jak znowu kliknę to już sie nie chowa.

Ten post edytował Czikusek 2.08.2018, 13:06:05

[trueblue]

Jeśli kliknę w kategorię z data-id="1", to co ma się stać?
Mam wrażenie, że piszesz o problemie zwizualizowania tego, a nie oprogramowania. Jeśli tak jest, to po prostu wstaw podkategorie za każdą co czwartą kategorię.

[Czikusek]

To jak klikniesz raz to ma się pokazać subkategoria. Jak klikniesz drugi raz to ma się schować. Teraz się nie chowa. Chodzi mi o efekt toggle (dosłownie)

[trueblue]

Efekt toggle, dosłownie: http://api.jquery.com/toggle/

[Czikusek]

To dałem toggle() i nie działa. Otwiera, ale już nie zamyka po ponownym kliknięciu. Więc? Wszystko przez to hide(). Jak to pogodzić ze sobą?

[trueblue]

Na klikniętej robisz toggle, na pozostałych robisz hide. W czym problem?

[Czikusek]

[PHP] pobierz, plaintext 
$(document).ready(function(){
 
		$('.maincategories a').click(function(){
			$('.subcategories-list').hide();
			var clicked = $(this).data("id");
			$('.subcategories-list[data-subcategory="'+clicked+'"]').toggle();
		});
 
 
	});
[PHP] pobierz, plaintext 

I tak jak pisałem... nie działa zwinięcie

[trueblue]

[HTML] pobierz, plaintext 
$('.maincategories a').click(function(e){
	var clicked = $(this).data("id");
	$('.subcategories-list:not([data-subcategory="'+clicked+'"])').hide();
	$('.subcategories-list[data-subcategory="'+clicked+'"]').toggle();
});
 
[HTML] pobierz, plaintext