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

1 Answer 1

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