Trouble creating collapsible Announcement Banner

Denise Wermager

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>

Denise Wermager

The answer I previously posted failed - issues were viewable but now I couldn't edit an issue. Still struggling with this one.

This was the code that prevented editing of issues that worked otherwise:

<head>
<style>
.collapse {
background-color: #FFFFC2;
border: none;
outline: none;
font-size: 18px;
}

.active,
.collapse:hover {
background-color: #FFFFC2;
}

.text {
background-color: #FFFFC2;
display: none;
font-size: 12px;
}
</style>
<head>
<body>
<button type="button" class="collapse">
JIRA System Unavailable - click for details
</button>

<div class="text">
Put text here.
</div>

<script>
var btn = document.getElementsByClassName("collapse");

btn[0].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>