j.silver Posted October 29, 2015 Share Posted October 29, 2015 Dear all: Below is how we can collapse and uncollapse a block of text suitable for FAQ or other similar effects, using HTML5. It seems it is supported by Chrome so far. The browser, however, will automatically highlight the output of the <summary> tag with a box. Is there a way of removing such box? Thanks. <!DOCTYPE html> <html> <body> <article class="collapsible_faq"> <details> <summary>Why do You Operate this Type of Business?</summary> <p>This is a feature of collapsing and uncollapsing a block of text using HTML5. It is just supported by chrome so far and Safari has started working on it. You should click on the little arrow to the left to collapse and uncollapse the text. </p> </details> <details> <summary>In Which Countries Do You Presently Work?</summary> <p>This is a feature of collapsing and uncollapsing a block of text using HTML5. It is just supported by chrome so far and Safari has starting working on it. You should click on the little arraow to the left to collapse and uncolapse the text. </p> </details> </article> </body> </html> Link to comment Share on other sites More sharing options...
mannemvamsi Posted October 29, 2015 Share Posted October 29, 2015 (edited) Have you tried normalizing your css (http://nicolas.github.com/normalize.css.) for more info Edited October 29, 2015 by mannemvamsi Link to comment Share on other sites More sharing options...
Ingolme Posted October 29, 2015 Share Posted October 29, 2015 In what way is it being highlighted? Depending on what it is, you can use background-color, border or outline to override the default style. Link to comment Share on other sites More sharing options...
j.silver Posted October 30, 2015 Author Share Posted October 30, 2015 It draws a box around it, which I am unable to remove even by the CSS effects you mentioned. You may please use the same code I provided in chrome to see what box I am talking about. Link to comment Share on other sites More sharing options...
DarkxPunk Posted November 20, 2015 Share Posted November 20, 2015 (edited) Some browsers add outlines: <!DOCTYPE html> <html> <head> <style> .no-outline:focus { outline: none; } </style> <body> <article class="collapsible_faq"> <details> <summary class="no-outline">Why do You Operate this Type of Business?</summary> <p>This is a feature of collapsing and uncollapsing a block of text using HTML5. It is just supported by chrome so far and Safari has started working on it. You should click on the little arrow to the left to collapse and uncollapse the text. </p> </details> <details> <summary class="no-outline">In Which Countries Do You Presently Work?</summary> <p>This is a feature of collapsing and uncollapsing a block of text using HTML5. It is just supported by chrome so far and Safari has starting working on it. You should click on the little arraow to the left to collapse and uncolapse the text. </p> </details> </article> </body> </html> Hope it helps Edited November 20, 2015 by DarkxPunk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now