5 svar · 591 visningar · startad av bikic
Hej,
I headern på sidan så anropar jag alla jqueryfunktioner, där jag bland annat har en togglefunktion.
Togglefunktionen ser ut så här.
// Toggle FAQ
$(".list-faq-container").hide();
$("div.trigger").toggle(function(){
$(this).next(".list-faq-container").show();
$(this).addClass("active");
}, function () {
$(this).next(".list-faq-container").hide();
$(this).removeClass("active");
});
Jag har också ett sökformulär med en autosuggest och här är tanken att man ska kunna söka på innehåll som finns inuti i toggle. Än så länge fungerar det skitbra och jag kommer till sidan där innehållet finns. MEN...
Jag vill att toggle ska expandera. Jag har lyckats få till det med att lägga en active-class på triggern (div.trigger) men innehållet (list-faq-container) visas ej.
I jqueryscriptet så finns $(".list-faq-container").hide(); Denna gömmer innehållet, men kan jag på något sätt få fram innehållet genom vanlig CSS. Jag har provat med display och visibility men det vill sig inte riktigt.
Någon som har tips?
Jag förstå inte vad du menar med:
jqueryscriptet så finns $(".list-faq-container").hide(); Denna gömmer innehållet, men kan jag på något sätt få fram innehållet genom vanlig CSS. Jag har provat med display och visibility men det vill sig inte riktigt.
Du få nog kolla igenom autosuggest koden så att den också söker i dolda element(?)
Jag fick löst det.
Jag gav innehållet som ska vara öppet en annan class som visas av jquery.
Hur gjorde du då?
Jag gjorde följande:
// Toggle FAQ
$(".list-faq-container").hide();
$(".list-faq-container-open").show();
$("div.trigger").toggle(function(){
$(this).next(".list-faq-container, .list-faq-container-open").show();
$(this).addClass("active");
}, function () {
$(this).next(".list-faq-container, .list-faq-container-open").hide();
$(this).removeClass("active");
});
<div class="trigger">Är Niklas bra på det mesta?</div>
<div class="list-faq-container-open">
Ja det är han ;)
</div>
usch,
hade hellre kört med den html struktur du hade:
<div class="trigger">Är Niklas bra på det mesta?</div>
<div class="list-faq-container open">
Ja det är han ;)
</div>
och bara lägga till "open" som en extra klass och kört jquery koden:
$(".list-faq-container:not(.open)").hide();
.Och bara köra addClass("open") och removeClass("open"), känns onödigt att behöva göra en helt ny CSS för .list-faq-container och .list-faq-container-open