While we're at it, let's match the padding of our answer to the padding of our toggle and we can make the background whatever we like by changing the default (we can make those changes to our background). And second, change the display setting from none to block. In our position, let’s change from absolute to static. So, we'll make two changes with here with our dropdown list selected. Instead, we want our answer to take up space and not be removed from the document flow. That’s what this element was made for.īut we want to break those rules. This is great when used in a navbar (like creating a dropdown menu, or meganav). But, this happens because the default for the dropdown list is set to position absolute. Our accordion opens, but the default content spills out of it. And before we jump in, let’s preview our progress. Double click to edit the text: What is the meaning of life? Question added. You can use a text block or a heading or a video. Since we need that let’s add height here that we'll later use to hide that answer (maybe 80 pixels).Īs you already know, this toggle will hold our question. And we want our interaction to collapse behind the toggle (to hide the answer). One thing to note, as we build we’re preparing our dropdown to collapse. Let’s customize it.Īnd what we wanna do is have our question here, and it’s what someone will click on to reveal the answer.įor OUR project, we want our answer and toggle to fill out this space to match the expected behavior (making this entire area clickable) so, we’ll need to change the default.Īnother class here - this time calling it something like “accordion toggle,” but you can name it anything you like. The item fills out all this space (everything available in its parent element). And since we want it to completely fill this (the whole area)? Let’s add 100% to the width. Of course, we can call it anything we like.Ĭlasses let us reuse styles (that we’ll create for this element). To turn this into an accordion, there are some changes we need to make.īefore we get there, with our dropdown selected, let’s add a class name. Let’s preview it (let’s see what it does). Using this element is pivotal for what we’re building for this reason: this particular element has default Dropdown actions (we can use these to our advantage). Over in our project? We'll drag in a Dropdown element. And our goal is this: when someone clicks on a question, we want our accordion to snow the answer below it. And finally, we'll create a custom trigger (the animation that makes it all work). We'll make some style changes to our accordion answer. Then, we’ll customize our toggle (the thing that will hold our question). Use it to copy and paste it into your own project, or just to get inspired or deconstruct it.įirst - we’ll begin by using the native Dropdown element. We’re doing this mainly to tinker and explore how we can control specific elements with Interactions, but if you’re looking to just quickly grab a working accordion, we've included a link to this down below. Today, we'll create an accordion-style layout for frequently asked questions.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |