Scroll list item to top

Design help General
1

Hi Guys,

anyone can suggest me how to nicely scroll the any of the items on the right to align with the OBSERVATION text on the left?

https://preview.webflow.com/preview/observations?preview=743f6bb7b4286fdd893f677b59fab37b

The next step is to then have that clicked on item expand to present content… Like on this page:

THANK YOU!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hi.

Scroll

The scroll list is regular #anchors links (Very simple). See her (And google it):

Accordion

Next this is accordion widget. For now you dont have this idea on Webflow - but you could solve this by custom code (search on the forum about this topic + see example her or related Q)

Webflow will work with any Accordion JS plugin you find (Jquery or vanilla-js).

Style

The style of the accordion Heading & content - is regular CSS (In your reference mix of float: left and width of 48% for the content. Inspect elements on Chrome).

CMS

Start from the basic. Next think how to integrate this idea with Webflow CMS (Start from static content).

Freelancers

List of freelancers-list her (No way to solve this by Forum Answer - this is more “small” project). Or add freelancer-job to the forum.

3

Thank you @siton_systems though several things that are still not clear:

  1. I am not able to use headings as a link? (basic but curious question?) as my list is a series of headings (H1)

  2. Even if I insert a standard LINK and follow your suggestion it does not define where and how to align the clicked on list item and scroll it up to meet the work ‘observations’ that should remain fixed at the left?

  3. lastly… I am trying to avoid any custom code… for an accordion feature, can I use an expanding animation of a div? expanding and pushing the content below once the scroll to animation is complete?

4

Hi @tbracher,

I build this FAQ site with webflow and the accordions are webflow only.

If your interested in how its done I can give you a read only link.

5

Hi @Maurice Yes please! this is great!!

6

Here is the Read Link @tbracher :blush:

7

thanks @Maurice this is going to take some time to digest…

Do you design the page full complete ‘expanded’ and then go back to create the interactions to create the “accordion”?

8

I make the accordions at last on this page. I first styled the accordion, that it look like I wanted and then I created the interactions.

9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.