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

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

}
</script>
    <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>


                <div id="contentToToggle2">

                </div>

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

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.?

3

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>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});
</script>
</head>
<body>

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

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

</body>
</html>

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.
</div>

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
2
  • 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..? – Atul Rakate Dec 28 '16 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 '17 at 23:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.