Jump to content

w3-accordion-content problem


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...