jQuery/Javascript/CSS foldout content

[Drennargh]

Ey Shrimp,

Op mijn site wil ik dat de content uitklapt naargelang de keuze van de bezoeker, omdat ik niet alles achter linkjes naar nieuwe pagina's wil plaatsen en de content voor particulieren niet interessant is voor bedrijven en omgekeerd.

Voorlopig ziet het er zo uit:

https://up4running.be/nieuwaanbod/

Als iemand meer info wilt, klapt er een volgende div uit (tweede niveau als het ware).

Dit kan door een knop via dezelfde functie of door hover via CSS (nog niet geïmplementeerd).

Het probleem is dat de dropdown-content divs van de info onder de divs van het aanbod staan omdat het aanbod in een flexbox zit om responsief te zijn.

Omdat op een klein scherm de items van het aanbod onder elkaar komen, zou het veel beter zijn als de info onder het juiste vak van het aanbod schuift. De info over trail running bv. onder het vak over trail running ipv onder alle items van het aanbod.

Ik bedacht dat het aanboditem een margin-bottom kan krijgen even groot als het vak met info, en dat infovak met absolute position erboven float om dat effect te krijgen.

Is het echter mogelijk om de height van het infovak (is afhankelijk van de content) te weten te komen en de margin-bottom daaraan gelijk te stellen, compatibel met de slideToggle functie?

Of zijn hier betere manieren dan flexbox?

[Jaak]

Ik zou persoonlijk alles ook in 1 container steken en die container een bepaalde breedte geven + links en rechts automatisch centreren. Op een breed scherm zijn uw kolommen wat te beed . Kzeggetmaar.

Voor de rest is mijn css/js-kennis niet voldoende om u deftig te kunnen helpen

[]as]e]

Originally Posted by Drennargh

Is het echter mogelijk om de height van het infovak (is afhankelijk van de content) te weten te komen en de margin-bottom daaraan gelijk te stellen, compatibel met de slideToggle functie?

Ja, via .height()

Maar zoals ik het nu zie heb je alles kunnen oplossen met te animeren naar de juiste scroll-positie?

Voor de rest zou ik de "meer info" content in de blok zelf steken, en niet eronder. Dan gewoon deze animeren (gewoon visible zetten en animeren via css transitions op de parent, je hebt hiervoor geen animate() nodig)

Als je toch graag flexbox gebruikt zou ik je bootstrap 4 aanraden, daar kan je ook per device breedte je order aanpassen, iets wat een typisch probleem is voor mobiele views waar alles onder elkaar staat: https://getbootstrap.com/docs/4.0/layout/grid/

Alleszins tof dat je het zelf probeert from scratch, hier zal je veel uit leren op termijn.

[Drennargh]

Originally Posted by Jaak

Ik zou persoonlijk alles ook in 1 container steken en die container een bepaalde breedte geven + links en rechts automatisch centreren. Op een breed scherm zijn uw kolommen wat te beed . Kzeggetmaar.

Voor de rest is mijn css/js-kennis niet voldoende om u deftig te kunnen helpen

Bedankt Jaak, ik ben zelf een noob, daarom dat ik het hier vraag. Ik wil het responsive houden, dus werk ik niet met vaste kolommen, maar het is dan wel de kunst om genoeg vrije ruimte over te houden zodat je geen hoofdpijn krijgt van alle info. Ik heb nu wat meer margin gebruikt zodat de tekst minder breed is.

Fuck Safari though. Die browser kan niet goed overweg met flexbox.

Originally Posted by ]as]e

Als je toch graag flexbox gebruikt zou ik je bootstrap 4 aanraden, daar kan je ook per device breedte je order aanpassen, iets wat een typisch probleem is voor mobiele views waar alles onder elkaar staat: https://getbootstrap.com/docs/4.0/layout/grid/

Alleszins tof dat je het zelf probeert from scratch, hier zal je veel uit leren op termijn.

Ik moest in het begin eigenlijk al naar bootstrap en grids kijken, maar initieel was het niet mijn bedoeling om zo veel met de site bezig te zijn, want als ik bezig ben met mijn site ben ik niet bezig met mijn eigenlijke werk. Niettemin kan ik het moeilijk laten.

Ik werk ook met @media queries om zo goed mogelijk rekening te houden met schermgroottes.

Originally Posted by ]as]e

zoals ik het nu zie heb je alles kunnen oplossen met te animeren naar de juiste scroll-positie?

Die scroll is tot op zekere hoogte een oplossing. Als je op informatie klikt, verwacht je ook dat je die te zien krijgt, en de scroll zorgt daarvoor. Het suckt echter als je op een klein scherm nog over 5 items in een lijst moet scrollen voor je de info over het eerste item ziet, en je nadien terug zou moeten scrollen voor het overzicht. Het lijkt mij intuïtiever dat je de info bij het vak zelf ziet. Daarom bedacht ik dat je met margin-bottom of padding-bottom van het item de flexbox verticaal kan uitrekken en de dropdown div erboven laten floaten zonder onderstaande flexbox content te overlappen.

Originally Posted by ]as]e

Voor de rest zou ik de "meer info" content in de blok zelf steken, en niet eronder. Dan gewoon deze animeren (gewoon visible zetten en animeren via css transitions op de parent, je hebt hiervoor geen animate() nodig)

Misschien zie ik het verkeerd, maar als je dan meerdere items op een rij hebt op een groot scherm, zal de extra informatie maar de breedte hebben van je flexbox item ipv de schermbreedte. Dat lijkt mij erg vreemd en verspilling van schermruimte. Of bedoel je het anders?

Ik wil bv. als je op meer info bij box 2 klikt dat box 4 en 5 naar beneden schuiven en de info over heel het scherm een nieuw vak vormt.

Box1 Box2 Box3
---info box 2----
Box4 Box 5

Originally Posted by ]as]e

Ja, via .height()

Zou dat hier werken? De actuele height is afhankelijk van de content en nergens gedefinieerd.

En afgezien daarvan varieert de height dynamisch en gelijktijdig met de slideToggle animatie.

Ik denk dat zoiets dan ergens moet komen bij de slidetoggle zodat de margin gelijktijdig gebeurt:

$(this).css('margin-bottom', $(document.getElementById(target_id)).height());

Of moet je dan een animate marginBottom doen?

https://codepen.io/Drennargh/pen/GMvNMX?editors=1100

edit: ik heb een codepen gemaakt ontdaan van alle overbodige info om te testen:

https://codepen.io/Drennargh/pen/NaaEqQ?editors=1100

[Zwoep]

Je bent dat nodeloos complex aan het maken en tegen de regels van UX aan het zondigen. Het is geen goed idee om alle info te gaan verbergen en divs te gaan sliden en togglen als het over zoveel content gaat.

Bekijk uw content nog eens goed, werk een structuur uit met enkele pagina's en groepeer daaronder items die tesamen horen. Desnoods kun je ook nog met ankers werken om naar het juiste onderdeel te springen. Maar divs die divs togglen is sowieso een slecht idee, uw bezoekers gaan weglopen (pun intended).

Tis een cliché maar eentje dat werkt; keep it simple, stupid.

[Drennargh]

Bwa is dat zo complex? Het is niet de bedoeling om tien divs te nesten, enkel om een infobox te tonen als je op een item in het overzicht klikt. Je kan inderdaad naar een anchor op een andere pagina met alle info verwijzen, maar of een nieuwe pagina laadt of je de info te zien krijgt bij het item waar je op klikt lijkt me niet zo verschillend voor de user. Het voordeel met togglen is dat je weer je overzicht hebt als je het dichtklapt.

Nu werk ik met een aantal image tiles met een kleine omschrijving die linken naar anchors op de overizichtspagina, maar dat vind ik te weinigzeggend.

[Zwoep]

Ge zit te diep in uw eigen onderwerp. Mensen scannen pagina's. Nu zie ik een lege pagina met een knop "contents". Waarom zou ik daar op klikken? En als ik er toch op klik krijg ik *baf* een oplijsting van +20 items. Ik ga die niet allemaal lezen hoor.
Ik blijf erbij, groepeer content, maakt het overzichtelijk zonder user interactie en diep dan verder uit.

[]as]e]

Ik volg zwoep 100%. Zoek eens wat voorbeelden van moderne sites waar zoveel content getoggled wordt? De trend de laatste jaren van one-pagers is ook dat mensen liever scrollen dan klikken (en zeker als ze moeten klikken en dan terug sluiten om plaats te winnen). Zeker gezien het grootste deel van uw bezoekers op termijn van smartphones gaat komen.

Begin eens met alle content mooi gestructureerd onder elkaar te zetten (geef maar genoeg padding, dat ademt)

Van zodra bepaalde blokken content te groot worden -> "meer lezen"-link naar nieuwe pagina (al dan niet ingeladen via ajax)

Bij (web)development ga je dikwijls merken dat je niet 100% goed bezig bent als je moet beginnen zoeken naar bvb hacks of "hoe berekenen ik hoogte van mijn div", terwijl sites van dat type al meer dan genoeg gemaakt zijn.

[Drennargh]

Originally Posted by Zwoep

Ge zit te diep in uw eigen onderwerp. Mensen scannen pagina's. Nu zie ik een lege pagina met een knop "contents". Waarom zou ik daar op klikken? En als ik er toch op klik krijg ik *baf* een oplijsting van +20 items. Ik ga die niet allemaal lezen hoor.
Ik blijf erbij, groepeer content, maakt het overzichtelijk zonder user interactie en diep dan verder uit.

Die table of contents is hier nu niet van belang, dat is iets dat auto genereert via plugin wanneer er veel headers zijn, zodat je makkelijk mobiel naar het gewenste stuk kan zonder uren scrollen. En die lege pagina is er omdat ik dit nog niet op mijn homepage zet als het nog niet af is he slimme! Dacht dat dat wel duidelijk was, maar ik keek over de TOC. Nu gaat het in ieder geval enkel over het aanbod.

De bedoeling is dat het een sectie wordt op mijn homepage met een klein overzicht in plaats van wat er nu staat. Ik heb er "Klik op een van bovenstaande knoppen." bijgezet. Had je de knoppen gezien?

Zo ziet het er momenteel uit, maar dat is gewoon niet concreet genoeg: https://up4running.be/#aanbod

edit: Ik heb voor de duidelijkheid het eerste stuk al default opengeklapt.

https://up4running.be/nieuwaanbod/