Skip to content
OverviewSolutions
1
Comments
3
Weston Vincze
@WestonVincze

All comments

  • Weston Vincze•30
    @WestonVinczePosted 11 months ago

    No worries! Happy to help. I took a look at the code and found the issue.

    This is the culprit.

    const questionHideContent = question.querySelector(".hide");

    The issue here is that querySelector only checks child nodes and .hide is actually a sibling.

    To solve this, all we have to do is change the above line to:

    const questionHideContent = question.parentNode.querySelector(".hide");

    As a side note, your solution no longer requires the active class, since it was previously used to determine whether or not .hide should be hidden or not.

    Marked as helpful
    1
  • mingen898•10
    @mingen898Submitted 11 months ago

    Hello! I just finished learning the basics of HTML and CSS so I wanted to get some practice in. This is my first-ever challenge on GitHub! Unfortunately, I haven't learned Java Script yet so I couldn't make this website interactive, so here's the design part! I've had some trouble trying to fit the background pattern into the top part of the page, which is why my CSS code for it is messy. I made the width of the image 100% so that it covers the entire width of the page, at the same time trying to make the height smaller. But doing so made the width of the image smaller even though it's still 100% and I don't understand why. Any feedback would be appreciated!

    FAQ-accordion (HTML and CSS only)

    2
    Weston Vincze•30
    @WestonVinczePosted 11 months ago

    Great job taking the first steps to learning web development!

    Responsive "hero" images are a bit tricky. The reason the height changes is because if the width is 100% the only way to maintain the correct aspect ratio is to shrink the height. There are many approaches to solve this problem, each with its own trade off.

    I solved this problem by setting a fixed height for the background-image and aligning it to the top center of the page. That way as the screen shrinks the image height stays the same and the edges get cropped. The reason I chose this solution is because I wanted to ensure that the FAQ section and hero image retained their overlapping positions.

    Also, HTML5 has relatively new <details> and <summary> elements that can create collapsible content (like an accordion) without the need for JavaScript. The browser support is somewhat limited but that's not a problem for a task like this.

    // details is a wrapper element
<details>
  // summary is where you would put the "question"
  <summary>
    (question)
  </summary>
  // anything inside details and outside of the summary tag will be hidden or shown when the summary is clicked
  <p>
    (answer)
  </p>
</details>
    0
  • Weston Vincze•30
    @WestonVinczePosted 11 months ago

    Adding transitions for an accordion is a bit tricky. In order for the text content to slide in and out you'll want to animate the max-height of the element.

    First, add this to your .hide class:

    .hide {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

    Next, remove display: none from your hide class as well, otherwise the content will be instantly hidden without any animation.

    The last part is where it gets a little tricky... we need to set a max-height for the content while the parent is active. An easy way to do this is to simply set the max-height to be higher than any of the content (something like 500px):

    .active .hide {
  max-height: 500px;
}

    However, you may notice that an odd delay occurs. That's because the animation goes from 0px to 500px and vice versa regardless of the actual height of the content. Basically, if your content is 300px high, the animation will act as if it was 500px.

    The better solution is to use JS to dynamically assign the max-height based on the content of each .hide by using its scrollHeight.

    // check if the parent is active
const isActive = answer.parentNode.classList.contains("active");

// if it is active, set the max height to the height of its scrollable content
answer.style.maxHeight = isActive ? `${answer.scrollHeight}px` : 0;

    Note: answer represents a single instance of a .hide element. You'll have to iterate through answers just like you did for questions.

    Hopefully that helps! Let me know if you have any questions about my explanation.

    Marked as helpful
    0