Jump to content

W3-CSS Accordion Question


Recommended Posts

I'm using the accordion component for an FAQ page.  I'm putting the FAQ question in the button text and answer in the text area that opens up when the accordion button is clicked on.  The problem I am having is that some of the questions are a bit long and the text in the button area of the accordion does not wrap and is not responsive.  I have tried many various CSS tags as well as W3-CSS classes and cannot get the text to wrap.  Is there a way to get the text in that area to wrap?  

Here is an example of the code:
<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">
Question text goes here</button>
<div id="Demo1" class="w3-container w3-hide">
  <p>Answer text goes here</p>

Any help will be appreciated.  Thanks!


Link to comment
Share on other sites

  • 2 weeks later...

Problem Solved!  All of the W3-CSS accordion examples show the < button > as the top part of the accordion and uses the w3-button class.  The HTML < button > tag does not allow wrapping the display test.  Period.  The accordion does not have to use that HTML tag.  I changed the < button > tag to a paragraph < p > tag, removed the w3-button class, kept the onclick code and other classes, and now I have a fully functional accordion where the top  display text wraps appropriately, to include the text that displays below it when you click on it.  All works in responsive mode as well.  I did not use the bootstrap accordion as the posted advertisement above suggested!  Bootstrap would NOT have worked either!  It uses the < button > HTML tag as well which does not allow wrapping the upper display text.


(Newbie to this forum, but not to programming and web development)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...