JavaScript Suche eine Art "Single-Accordion"

mischaef · 13. Juni 2016

Hallo zusammen,

ich suche für eine mobile Webseite nach einer Möglichkeit, Inhalte ein- und ausblenden zu können. Das ganze soll so funktionieren, wie die bekannten Accordion-Scripte. Das Problem bei den über 30, welche ich bisher ausprobiert habe, ist jedoch: Wenn eines geöffnet wird, schließen sich die anderen. Das soll der Nutzer bei mir aber selbst entscheiden. Zudem sind die meisten Scripte dafür ein durchgängiges Konstrukt - bei mir sollen aber nur vereinzelte Stellen zum ein- und ausgeklappt werden, z.B. Zusatzinformationen, welche jedoch keine hohe Wichtigkeit besitzen. Das ganze darf ruhig per JS oder jQuery gelöst sein - sollte aber einfach zu implementieren sein.

Kennt jemand zufällig so etwas?

besten dank

Michael

AndrewPoison · 13. Juni 2016

Warum in die Ferne schweifen?

Wenn du Jquery drin hast, ist es doch ein Kinderspiel. An die Stelle, wo was aufklappen soll, packst du dir ein DIV oder SPAN (halt ein Block- oder Inline-Block-Element, dass du mit CSS z.B. standardmäßig auf display:none setzt) mit den Details, verpasst ihm eine Class (im Beispiel unten SELECTOR) und schreibst *eine* Zeile JQuery:

Code:

$(".SELECTOR").on("click touchend",function(e){$(this).slideToggle();})

Bums. Fertig ^^

mischaef · 13. Juni 2016

OK, wusste jetzt nicht, dass das einfach umzustzen ist...aber irgendwie klappt es nicht.

Habe das ganze jetzt so mal testweise auf einer Seite gemacht (auf der eigentlichen Seite wird es noch "sauberer" eingebunden)

Code:

<script src="inc/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">$(".inhalt_test").on("click touchend",function(e){$(this).slideToggle();})</script>

<div class="inhalt_test">

    <h3>Test</h3>
    <p>ifrgweiufgwifbweifbwiebfwibfvibfcodjfhpnbzifbgvdauo</p>
    
</div>

Nur: Irgendein Bereich muss doch jetzt als "Link" fungieren, also dort, wo der Nutzer drauftippen muss. Wenn das alles im Div ist, bleibt doch, wenn es funktionieren sollte, erst einmal alles verborgen, oder? Mal davon abgesehen, dass das bei mir nicht der Fall ist - es wird alles direkt auf der Seite angezeigt...

AndrewPoison · 13. Juni 2016

Du hast natürlich recht. Es muss einen Trigger geben, in der Art:

Code:

<script src="inc/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">$(".inhalt_test").on("click touchend",function(e){$(this).find('div.wrapper').slideToggle();})</script>

<style>div div.wrapper {display:none}</style>

<div class="inhalt_test">HIER TRIGGERN
  <div class="wrapper">
 <h3>Test</h3><p>ifrgweiufgwifbweifbwiebfwibfvibfcodjfhpnbzifbgvdauo</p>
 </div>
</div>

Ich habs nicht ausprobiert, aber sollte klappen.

/EDIT: nach 15 Änderungen, jetzt

Die Forumsoftware hat mein Code kaputt gemacht

Aaaalso:
1) Mit der Style-Angabe setz ich erst mal alle div's mit der Klasse "wrapper", die sich in einem anderen div befinden, auf unsichtbar
2) Mit dem JQuery-Code wird bei Klick auf das umgebende Element nach dem darin befindlichen Wrapper gesucht und dieser ein- oder ausgeblendet, je nach dem. Die Bezeichnungen und Implementierung sollte dann natürlich sauber und richtig sein, aber jetzt zur Demo... sollte es reichen.

mischaef · 13. Juni 2016

Jetzt ist zumindest alles weg...^^

Aber immer noch nichts zum draufklicken. Sorry, aber ich hab von JS eben so was von keine Ahnung...^^

AndrewPoison · 13. Juni 2016

Ich hab aufgeräumt

Probiers noch mal, ich hab den Text "HIER TRIGGERN" noch in das Div reingeschrieben. Der sollte angezeigt werden und bei Klick das darunter befindliche Div ein- und ausblenden.

Ergänzung (13. Juni 2016)

https://jsfiddle.net/nfa2Lj6y/

Da. Jetzt direkt getestet. Läuft

"Hübsch" würde man das ganze dann noch mit CSS machen. Vlt. ne Box, Rahmen drum, evtl. ein Position:Absolute oder solche Späße.

mischaef · 13. Juni 2016

ok, jetzt erkenne ich auch etwas..^^

Aber "HIER TRIGGERN" wird angezeigt, aber wenn ich drauf drücke, passiert nichts.

jQuery scheint aber richtig eingebunden zu sein,

Code:

<script> 
 if (typeof jQuery != 'undefined') { 
 // jQuery is loaded => print the version
 alert(jQuery.fn.jquery);
 }
 </script>

gibt mir ein Fenster mit "1.9.1" aus - daran sollte es also nicht liegen.

AndrewPoison · 13. Juni 2016

Das JSFiddle schon angesehen? Und den Code 1:1 mal übernommen?

Musst dann halt das Skript wieder in einen Skript-Block packen und die Styles in einen Style-Block, klar.

Ansonsten ist das einzige, was mir jetzt noch einfiele, den JQuery-On-Ready-Event zu nutzen (sollte man eh), also in der Form:

<script>
$(function() {
$(".inhalt_test").on("click touchend",function(e){$(this).find('div.wrapper').slideToggle();})
});
</script>

Wichtig ist auch, dass der Skript-Block nach dem Einbinden von JQuery steht.

Was sagt deine Javascript-Konsole im Browser? Und wie gesagt, funzt das JSFiddle bei dir? Bei mir tut es nämlich seinen Dienst

mischaef · 13. Juni 2016

JSFiddle? Du sprichst in Rätseln...^^

Klar muss er danach stehen, sonst bezieht sich der Block ja auf etwas, was noch nicht eingebunden ist.

Aber mit dem neuen Script funzt es...superbesten dank!!!

OK, einen kleinen Schönheitsfehlre gibt es noch: Mobil via Chrome-Browser geht der Inhalt direkt immer wieder zu!

kling1 · 13. Juni 2016

css only version auf jsfiddle

https://jsfiddle.net/eoyjz5x8/

und hier eine version mit ein animation:
https://jsfiddle.net/eoyjz5x8/1/

mischaef · 13. Juni 2016

Eine Idee, warum sich der Container unter den mobilen Chrome direkt wieder schließt hast Du nicht zufällig? ^^

AndrewPoison · 13. Juni 2016

mischaef schrieb:
OK, einen kleinen Schönheitsfehlre gibt es noch: Mobil via Chrome-Browser geht der Inhalt direkt immer wieder zu!

Weil ich den Event auf "click" und "touchend" gelegt hab. Ist natürlich doof, wenn dein Mobilbrowser BEIDE feuert. Click und Touchend. Dann macht er ihn erst auf und dann wieder zu

Wenn du touchend aber wegnimmst, kann es gut sein, dass wenige mobile Browser überhaupt noch darauf reagieren.

(Die CSS-only-Solution von kling1 ist auch nett, aber oft in dem Kontext nicht ganz so leicht einzupflegen von HTML-Seite, gerade in Fließtext recht nervig ^^ Aber cool trotzdem

)

Teisi · 13. Juni 2016

AndrewPoison schrieb:
... Wenn du touchend aber wegnimmst, kann es gut sein, dass wenige mobile Browser überhaupt noch darauf reagieren. ...

Ähm hä?

bei sowas nehme ich generell nur "click", kenne keinen Browser der nur ein "touch" Event feuert...
Soweit ich weiß existiert nur ein Unterschied wann das "click" auf Touch-Browsern gefeuert wird, da wirds teilweise bei touchstart gefeuert - der nächste Browser machts bei touchend etc.

Was hier aber eher egal sein sollte.

Übrigends kenne ich keine wirklich zuverlässige Lösung um herraus zu finden ob der User nun Touched oder doch lieber die Mouse benutzt - ganz wichtig für die Hybriden z. B. Lenovo Yoga oder ASUS Transformer. Aber das is OT...

mischaef · 14. Juni 2016

Ich muss noch einmal für zwei Dinge nachhaken:

Gibt es eine Möglichkeit, den Status des Scriptes abzufragen, so dass ich bei Bedarf ein Icon als Hinweis zum Auf- und Zuklappen einbauen kann?

Die andere Frage: Gibt es eine Möglichkeit, die Inhalte besser zu laden? Ich wollte in den KLapper einen Slider für ein paar Bilder einbauen, wenn ich den Bereich aber aufklappe dauert es einige Zeit, bis die Bilder dargestellt werden. Bringe ich den Slider außerhalb der Bereiche an, werden die Bilder sofort nach dem Laden der Seite dargestellt...

Hat jemand zufällig eine Idee was ich machen könnte?

ice-breaker · 14. Juni 2016

Nur als Notiz noch:
Dass du nicht gefunden hast, was du suchst, liegt an dem Begriff. Ein Accordion ist eben so definiert, dass nur 1 von n Elementen aufgeklappt ist. Was du gesucht hast ist ein "Collapse" oder "Collapsible".

mischaef · 15. Juni 2016

Ah, daran kann es natürlich auch gelegen haben...danke für den Hinweis...

Suche

JavaScript Suche eine Art "Single-Accordion"

mischaef

Kassettenkind

AndrewPoison

Admiral

mischaef

Kassettenkind

AndrewPoison

Admiral

mischaef

Kassettenkind

AndrewPoison

Admiral

mischaef

Kassettenkind

AndrewPoison

Admiral

mischaef

Kassettenkind

kling1

Gast

mischaef

Kassettenkind

AndrewPoison

Admiral

Teisi

Lt. Junior Grade

mischaef

Kassettenkind

ice-breaker

Commodore

mischaef

Kassettenkind

Ähnliche Themen