Expandera div med JS på en annan del av sidan

2012-09-30 09:57

Permalänk

flashen

Musikälskare ★

Plats: 花より団子 🍡
Registrerad: Maj 2002

●

Expandera div med JS på en annan del av sidan

Tjena!

Har ett problem

Jag vill öppna och stänga en div (slide) på en annan del av koden.

Just nu kör jag så här men det måste sitta ihop för att fungera, jag vill ha kod i mellan .trigger och .target så att divven öppnas på en annan del av sidan

Är det möjligt?

<div class="trigger unselectable" unselectable="on">Press to show</div>

// Här vill jag ha andra divvar etc.

<div class="target">
content
</div>

$('.trigger').click(function(){
$(this).next('.target').stop().slideToggle(85);
$(this).text($(this).text() == 'Press to show' ? 'Press to hide' : 'Press to show');
});

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB 6000Mhz DDR5 Dominator ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X

💾 Min retrodator
📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Rapportera Redigera

Citera flera Citera

2012-09-30 10:31

Permalänk

Florrpan

Medlem ★

Plats: Sundsvall
Registrerad: Dec 2006

●

Jag förstår inte riktigt din fråga:

Vill du helt enkelt klicka på en knapp länst upp på sidan, för att seda se en div öppnas länst ner på sidan?(exempel)

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Rapportera Redigera

Citera flera Citera

2012-09-30 10:32

Permalänk

flashen

Musikälskare ★

Plats: 花より団子 🍡
Registrerad: Maj 2002

●

Skrivet av FlorrpaN:

Jag förstår inte riktigt din fråga:

Vill du helt enkelt klicka på en knapp länst upp på sidan, för att seda se en div öppnas länst ner på sidan?(exempel)

Gå till inlägget

Ja precis

Så de inte är beroende av att trigger-koden måste ligga tillsammans med target-koden för att fungera

Till exempel:

Fungerar

<div class="trigger unselectable" unselectable="on">Press to show</div>
<div class="target">
content
</div>

Fungerar inte

<div class="trigger unselectable" unselectable="on">Press to show</div>

<div class="target">
content
</div>

Här är ett fiddle på koden jag har nu

http://jsfiddle.net/VqMNL/

Senast redigerat 2012-09-30 10:44

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB 6000Mhz DDR5 Dominator ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X

💾 Min retrodator
📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Rapportera Redigera

Citera flera Citera

2012-09-30 10:38

Permalänk

BjornS

Medlem

Plats: Stockholm
Registrerad: Aug 2004

●

Visa:
document.getElementById("target").style.display = "";

Dölja:
document.getElementById("target").style.display = "none";

Förutsätter givetvis att target har id="target"...

Visa signatur

Rapportera Redigera

Citera flera Citera

2012-09-30 10:47

Permalänk

Marwelln

Medlem

Registrerad: Jan 2008

●

Det är bara att skippa next() och använda en vanlig select/eller-vad-det-nu-kallas.

var $target = $('.target');
$('.trigger').click(function(){
    var $self = $(this);
    $target.stop().slideToggle(85);
    $self.text($self.text() == 'Press to show' ? 'Press to hide' : 'Press to show');
});

http://jsfiddle.net/VqMNL/3/

Rapportera Redigera

Citera flera Citera

2012-09-30 10:51

Permalänk

flashen

Musikälskare ★

Plats: 花より団子 🍡
Registrerad: Maj 2002

●

Skrivet av Marwelln:

Det är bara att skippa next() och använda en vanlig select/eller-vad-det-nu-kallas.

var $target = $('.target');
$('.trigger').click(function(){
    var $self = $(this);
    $target.stop().slideToggle(85);
    $self.text($self.text() == 'Press to show' ? 'Press to hide' : 'Press to show');
});

http://jsfiddle.net/VqMNL/3/

Gå till inlägget

Verkar fungera, känner man måste läsa på JS/JQ lite bättre haha

Tack för ditt svar

Senast redigerat 2012-09-30 11:16

Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB 6000Mhz DDR5 Dominator ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X