Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Celebration

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

Trouble creating collapsible Announcement Banner

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>

1 answer

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>

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events