Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Trouble creating collapsible Announcement Banner

Denise Wermager
Denise Wermager February 1, 2023

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>

Answer
Watch
Like Be the first to like this
486 views

1 answer

0 votes
Denise Wermager
Denise Wermager February 1, 2023

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>

Reply

Suggest an answer

Log in or Sign up to answer
Jira
Jira Software
TAGS
AUG Leaders

Atlassian Community Events

    See all events