<apex:page >
function toggle()
    var tt = document.getElementById('contentToToggle');

    var tt2 = document.getElementById('contentToToggle2');
    var showcontent = true;
        tt.innerHTML = tt2.innerHTML;
        showcontent = false;
        tt2.innerHTML = tt.innerHTML;
        showcontent = true;

    <apex:form >
        <apex:outputpanel id="contentPanel">
            <h1>Show/Hide HTML form Visualforce Example</h1>

                <div id="contentToToggle" >
                    This is the content that will be toggled.

                <div id="contentToToggle2">


        <apex:commandbutton value="Toggle Content" onclick="toggle()" rerender="contentPanel"></apex:commandbutton>

I want to perform toggle operation on button click, I want to show contents from div id="contentToToggle" after button click, is it possible using JavaScript.?

1 Answer 1


You can easily do this using Jquery toggle.

Here is a sample code or you.

<apex:page >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<p>This is a paragraph.</p>

<button>Toggle between hide() and show()</button>


If you still want to do this with Javascript then here is sample for you for same

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.

function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
  • it's working fine..but is it possible to load blank vf page with single button and after clicking on the button load the contents from div..? Dec 28, 2016 at 6:33
  • If you want to load the contents of the div dynamically, you'll have to use some javascript remote objects or javascript remoting. The above answer will only hide/unhide the div, but it will still be there in the html.
    – willard
    May 31, 2017 at 23:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .