How can I hide/show content by click?

[Itai Aharon]

Hello everyone!
Is there any possibility where I can hide/show certain content by clicking an image attached to my page? 

[Srinatha Tondihal]

Hi @Itai Aharon ,

Welcome to Atlassian community. 

You can hide or show content by using the Expand macro.

• Expand-macro 

Basically it will hide the content inside it and let you expand or close . I hope this is what you are looking at ?

Have a good day!

Thanks,

Srinath T

[WW]

You'd have to use the HTML macro (assuming it's enabled on your instance) and add maybe some JavaScript or something else to get an image click to show/hide content.

There's no built-in feature for that except the aforementioned Expand macro, which is not an image.

Here's some code that uses the HTML macro and the aui (Atlassian user interface) classes to make a button show content. You'd need to alter it to make an image do the same thing.

<div class="aui-group">
<button data-aui-trigger aria-controls="my-button" class="aui-button aui-button-primary">
<span class="aui-icon aui-icon-small aui-iconfont-hipchat">View more details</span> Click me to see content
</button>
<aui-inline-dialog id="my-button">
<h1>Here's a header</h1>
<p>Here is some content.</p>
<p><span class="aui-icon aui-icon-small aui-iconfont-remove">X icon in a circle</span>You can even use Atlassian aui icons</p>
<h2>Here's a second header</h2>
<p>More content</p>
<p><span class="aui-icon aui-icon-small aui-iconfont-approve">Check mark</span>A check mark</p>
<h3>Header 3</h3>
<p>You get the idea</p>
<p align=right><span class="aui-icon aui-icon-small aui-iconfont-info">Info</span> <em>Click outside this pop-up to close it</em></p>
</aui-inline-dialog> 
</div>

[Srinatha Tondihal]

Bingo! the requirement was to click on image . Thanks for the inputs @WW .