Collapse | Laminar | Anduin Design

div(
  tw.heading3,
  "What are basic FAQ questions?"
),
CollapseL(
  direction = _.BottomToTop,
  renderTarget = renderProps => {
    ButtonL(
      style = _.Ghost(height = _.Fix24),
      onClick = renderProps.onToggle.contramap(_ => ())
    )(
      renderProps.currentStatus match {
        case Collapse.Status.Open  => "Less"
        case Collapse.Status.Close => "More"
      }
    )
  }  
)(
  """
  |FAQs are a list of common questions and their corresponding answers on a particular topic.
  |They cover topics such as timing, delivery, handling, product information, and return policy.
  |You can find FAQs anywhere on a page, but they're usually located at the top or bottom.
  |""".stripMargin
)

div(  tw.heading3,  "What are basic FAQ questions?"),CollapseL(  direction = _.BottomToTop,  renderTarget = renderProps => {    ButtonL(      style = _.Ghost(height = _.Fix24),      onClick = renderProps.onToggle.contramap(_ => ())    )(      renderProps.currentStatus match {        case Collapse.Status.Open  => "Less"        case Collapse.Status.Close => "More"      }    )  }  )(  """  |FAQs are a list of common questions and their corresponding answers on a particular topic.  |They cover topics such as timing, delivery, handling, product information, and return policy.  |You can find FAQs anywhere on a page, but they're usually located at the top or bottom.  |""".stripMargin)