Jump to content

w3-accordion-content problem


raylaur
 Share

Recommended Posts

when I add an anchor tag to text in a w3-accordion-content div, the browser treats the anchor code as an invisible text string and my text line wraps when it shouldn't. Is this a bug or is my code wrong?

    <div class="w3-accordion w3-container">

      <a href="#" onclick="openTagline('tagline1')" class="HPE-text-green">
      <h3>This is some headline</h3>
      </a>

      <div id="tagline1"  class="w3-accordion-content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, consequatur<a href="somelocalhtmlpage.html" target="_self"><strong>Bonorum et Malorum</strong></a>.</p>
      </div>
    </div>
    
Link to comment
Share on other sites

The w3-accordion class seems to be built for links to be styled as a navigation element, so generally the accordion content would be nothing but a set of links and they would be styled as blocks.

 

Here's the CSS that's being applied to the link:

.w3-accordion-content a {
    padding: 6px 16px;
    display: block;
}

You can add a rule like this to your own stylesheet to override it.

.w3-accordion-content p a {
  padding: 0;
  display: inline;
}
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
 Share

×
×
  • Create New...