Jump to content

j.silver
 Share

Recommended Posts

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

  • 3 weeks later...

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 :D

Edited by DarkxPunk
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...