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').showtoggle(); }); }); </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> |