I am developing a classic FAQ page and wish to use collapsible sections. Effectively, there will be a number of questions, each with their answers. Each question will be a link and the answer will appear below when you click the link.
I have followed the user guide to the best of my knowledge.
Typed the question.
Added a box underneath the question, in which I have typed the answer
In the Style section for the answer box I have set Position to ‘Relative’, and Display to ‘None’ (the box now dissapears from the work space in Xway)
In the Dynamic Styles section for the answer box I have set Type to ‘Target’ and Display to ‘Normal’
I have then highlighted the question text and made it a page link which points to the relevant page as well as an item. As an item I have chosen the relevant answer box.
Once I save and preview it in the browser the question text (links) appear correctly. But when I click a question link the answer doesn’t appear neatly. Instead the screen jumps quite a bit so the question and first five or so lines of the answer is not in the screen area. Obviously, I’d like the question to stay and the answer to appear in full below so the reader can see both instead of having to scroll up and see the question and the first part of the answer.
I’m trying to develop a classic FAQ page and wish to use collapsible sections so you click on a question and the answer appears below. There are literally thousanda of example across the internet but here’s one example showing what should happen:
Note that the question stays fixed on the screen and the answer simply appears below.
The root cause is that links to element IDs will scroll to that element, placing that element as close to the top of the view as possible. This means the answer element becomes positioned at the top of the view, behind the header.
I could be wrong but as far as I’m aware, it’s not possible to prevent this behaviour using CSS alone, JavaScript needs to handle the link.
That said, you can use scroll-margin-top or scroll-padding-top to adjust where it will scroll to. The former is applied to the element being linked to, so each of your answer boxes, the latter is applied to html and affects everything being linked to on the page.
Since this is a questions and answers page, you probably want the latter so you don’t need to apply it to every answer and remember to do it for future answers. I think 8.5em looks about right.
You can’t add CSS to the html tag directly in Xway so you would need to open the page inspector, expand CSS markup and add the following:
html {
scroll-padding-top: 8.5em;
}
It’ll still scroll but the top of the answer (and the question with 8.5em) will be visible beneath the header.
Another way to solve this is using the Details element, along with the Summary element to show the question part. That doesn’t jump, because it is designed to work exactly how you would like it to.
<details>
<summary>Question goes here</summary>
Raw text, additional block-level, or inline elements go here.
</details>
No, it’s a different element that you use in your layout. Think of the <details> tag as being a special kind of <div>, and the <summary> as a kind of heading, like an h3 or whatever. I have not tried to do this in Xway, and I don’t have it open at the moment to try. This may be all theoretical if there isn’t a simple way to use those tags.
But it’s definitely the correct way to structure this kind of site feature. It presents the heading only, like an “accordion FAQ” would, and a disclosure triangle at the start (left, in LTR languages) of the summary. When you click that triangle or the summary, the rest of the details tag is made visible.
It also has tremendous accessibility benefits. Screen readers don’t waste time reading the hidden details aloud until you actually “click” one of the headings with a keystroke. There is no need to add any additional Aria tags to describe what the element means semantically, either.
Nice! That’s a very handy tool for this kind of presentation.
Also mentioned in one of the examples on the page you linked to, giving each details element the same name (<details name="foo">) will mean only one can be open at a time. Opening a second will close the first.
Though it doesn’t mention anything about scrolling, so potentially that might not always do the right thing on its own (haven’t done any testing). I.e. closing one further up the page when opening one further down might cause the one just opened to move off the top of the view.