CODEWITHSUNDEEP
csshtmlcss-transitionssemantic-markupcollapsable
Sam
Sam

Reputation: 15506

Collapsable HTML5 <detail><summary> works in FF and Chrome, but not in IE and Edge

The standard collapsable HTML5 semantic markup <detail> and <summary> work finally flawlessly in FireFox and Chrome, but not in IE and Edge.

Any ideas how to fix this with (a tiny bit of light code) for IE and Edge?

jQuery 3.x is already loaded in my site so if the fix involves using something from that library to strealine the transition (linear or easing) then that would be great. Also nice would be a userselectable default setting to toggle weather the detail should appear "open" or "closed" at pageload. Thanks!

if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent) || /Edge/i.test(navigator.userAgent)){

$(function(){
	$('summary').click(function(){
		$(this).parent().find('article').slideToggle();
	});
});

}
details{
}
summary{
	cursor: pointer; cursor: hand;
	background-color: blue;
	display: block;
	padding: 10px;
	margin: 0 0 20px 0;
}

summary:after {
  background: yellow;
  content: "+";
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
  text-align: center;
  width: 20px;
}
details[open] summary:after {
	content: "-";
}

details summary::-webkit-details-marker {
	display:none;	/* hides the standard > sign */
}
summary:focus {outline:0 !important;}	/* hides the blue borderin chrome, once clicked */

@keyframes slideDown {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 100%;
    }
}

details[open] {
    animation-name: slideDown;
    animation-duration: 500ms;
    animation-timing-function:lineair;
}

article {display: block;} 
@media screen and (max-width: 767px) { 
    article {display:none;} 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<details>
<summary>Testing Testing</summary>
<article class="project">
<p>Ventilatie is noodzakelijk voor een gezond binnenklimaat in ruimten waar mensen verblijven en gebeurt door koolzuurgas, vocht en verontreiniging af te voeren en verse lucht aan te voeren. De luchtverontreiniging kan van verschillende aard zijn (bijvoorbeeld sigarettenrook, bacteriën en schimmelsporen, chemische stoffen, stof, geurstoffen). De noodzakelijke hoeveelheid te verversen lucht (debiet) hangt af van de productie van vocht, koolstofdioxide (CO²) en verontreiniging en de aard van de verontreiniging, en van het aantal mensen die in die ruimten verblijven. Spuiventilatie of luchten is niet hetzelfde als de hier genoemde ventilatie, maar heeft ten doel in korte tijd sterk verontreinigde binnenlucht af te voeren of te spuien. Dit kan worden bereikt door ramen en/of deuren tegen elkaar open te zetten. Bij de meeste woningen gebeurt de ventilatie ongecontroleerd: doordat de wind in kieren en spleten waait, ververst de lucht. Dit zorgt in vele gevallen voor overbodige ventilatie, een onaangenaam binnenklimaat en dus ook voor warmteverliezen. Men kan dit verminderen door tijdens het bouwen en onderhoud aandacht te besteden aan luchtdichtheid.  Meestal wordt daarvoor een dampscherm geplaatst tegen de isolatie. Men dient rekening te houden met de vochthuishouding: als de warme vochtige binnenlucht kan doordringen tot in de isolatie zal deze lucht afkoelen naarmate de buitenmuur benaderd wordt, waardoor er condensatie kan optreden die de isolatiewaarde weer doet verminderen en is een dampdichte laag nodig om het damptransport te verminderen. Om dit makkelijker te onthouden zijn de dampremmende folies meestal rood (warm; binnenkant) en de damp-open folies blauw.</p>
</article>
</details>

Upvotes: 2

Views: 678

Answers (2)

Kevin Sijbers
Kevin Sijbers

Reputation: 824

In your example, this should do the job. This makes it so it expands the article specificly, instead of the the container (details)

$(function(){
    $('summary').click(function(){
        $(this).parent().find('article').slideToggle();
    });
});

edit: In the comments, OP asked for managing the initial state of the article with css, with a different behaviour on mobile and desktop. The following CSS would make the detail article hidden by default on mobile (generally considered <768px width) and expanded on everything bigger.

article {display: block;} 
@media screen and (max-width: 767px) { 
    article {display:none;} 
}

if you would want the article to also be hidden on tablets (which are in practice a very small minority in users, so not that big of a concern usually), you would change the 767px to somewhere in the 900-1000 range, depending on your choice. Bootstrap uses 991px for example.

Upvotes: 1

ne1410s
ne1410s

Reputation: 7082

The open attribute is simply not supported in those browsers, neither are some of the semantic tags (e.g. <summary>). I think this is why your css rules are not being applied.

https://www.w3schools.com/tags/att_details_open.asp https://www.w3schools.com/tags/tag_summary.asp

Maybe change the jQuery to toggle a class - like in the good old days :)

Upvotes: 1

Related Questions