Click on "Toggle" button to show either block 1 or block 2 below
HTML |
---|
<form class="aui">
<button type="button" class="aui-button" id="myToggler">Toggle</button>
</form>
<script type="text/javascript">
AJS.toInit(function() {
AJS.$('#myToggler').click(function(){
AJS.$('#block1').toggle();
AJS.$('#block2').toggle();
});
});
</script>
|
Storage format
Code Block |
---|
<ac:structured-macro ac:macro-id="e9869280-f206-4c2f-b1bf-2f223876046e" ac:name="html" ac:schema-version="1">
<ac:plain-text-body><![CDATA[<form class="aui">
<button type="button" class="aui-button" id="myToggler">Toggle</button>
</form>
<script type="text/javascript">
AJS.toInit(function() {
AJS.$('#myToggler').click(function(){
AJS.$('#block1').toggle();
AJS.$('#block2').toggle();
});
});
</script>
]]></ac:plain-text-body>
</ac:structured-macro>
<p>
<br/>
</p>
<p>
<br/>
</p>
<ac:structured-macro ac:macro-id="ba9ae099-2555-4d33-9845-00c3779aed7b" ac:name="div" ac:schema-version="1">
<ac:parameter ac:name="id">block1</ac:parameter>
<ac:rich-text-body>
<h1>Block 1</h1>
</ac:rich-text-body>
</ac:structured-macro>
<ac:structured-macro ac:macro-id="c4b75335-6807-4384-8667-65a9aad0fbb5" ac:name="div" ac:schema-version="1">
<ac:parameter ac:name="style">display:none;</ac:parameter>
<ac:parameter ac:name="id">block2</ac:parameter>
<ac:rich-text-body>
<h1>Block 2</h1>
</ac:rich-text-body>
</ac:structured-macro>
|