CODEWITHSUNDEEP
htmlhtml-tag-details
user3809384
user3809384

Reputation: 107

Why isn't the summary and detail tag working?

I have tried this code here. <details> and <summary> tags are not showing in any of browser I try using. Why?

<details>
  <summary>StudentResult</summary>
  <p> The student result are just average...</p>
</details>

Upvotes: 0

Views: 9938

Answers (3)

Krupal Shah
Krupal Shah

Reputation: 9187

<details> and <summary> tags are not supported in mozila firefox and internet explorer. Also they are only supported by any version of google chrome heigher than 12.So, it depends on which browser and which version you are using.

follwing links will help:summary tag , details tag

Upvotes: 4

nsthethunderbolt
nsthethunderbolt

Reputation: 2097

try it out:

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript" />
<script type="text/javascript">
$(function(){
$('#showNow').click(function(){
$('details').slideDown();
});
});
</script>
</head>
<body>
<button id='showNow'>Show</button>
     <details style='display:none;'>
      <summary>StudentResult</summary>
      <p> The student result are just average...</p>
     </details> 

    </body>
    </html>

Upvotes: 2

Ma3x
Ma3x

Reputation: 6549

If you want the content to be visible by default you need to specify the open attribute.

<details open="open">
    <summary>StudentResult</summary>
    <p> The student result are just average...</p>
</details>

Keep in mind that not all browsers have a native implementation for this, so you might have to enhance it with some javascript if you want it to work the same in all browsers.

Upvotes: 2

Related Questions