I am trying to create a button on the banner that the user can open/close the details of the banner.
I have the following html code in the Announcement Banner but when using this and then try to view an issue, the screen does not render properly. The banner works perfectly but if I can't view issues, etc. when using this I need to find a different way to do this. Has anyone else created an Announcement Banner that can be collapsed or hidden once viewed.
I found information indicating that this can be due to an unclosed html tag - but I have closed all the tags.
https://confluence.atlassian.com/jirakb/jira-pages-go-hidden-or-blank-after-adding-an-announcement-banner-396298891.html
https://confluence.atlassian.com/jirakb/jira-pages-are-hidden-after-configuring-announcement-banner-268044634.html
Any help with this would be greatly appreciated.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.collapsible {
background-color: #FFFFC2;
color: black;
cursor: pointer;
padding: 8px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #FFFFC2;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #FFFFC2;
}
</style>
</head>
<button type="button" class="collapsible"><b>JIRA System Unavailable - click for details</b></button>
<body>
<div class="content">
<p>Add text here</p>
</div>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.