I have a scenario in which I have created a vf page. My vf page contains both input and output field, and also there is "review" button at the bottom. I want to perform a task in which some one click on the "review" button the input fields gets hidden and the output field appears. How do I achieve this?

  • 2
    Post your code for better information. Commented Jan 7, 2020 at 9:11

2 Answers 2


On click of button you can have javascript/jQuery defined which will show or hide the tags or div based on Id. Below is the sample code which behaves the same way

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <apex:slds />
    <script type="text/javascript">
        $(document).ready(function() {

            $('#clicked').click(function() {

    <div id="divId">
        <apex:outputText value="This is outputtext" />
    <button type="button" id="clicked">Click Me!</button>    </apex:page>

You can use the rendered attribute to toggle between inputField and outputField i.e. use a boolean field which can be toggled on click of Review button and based on this boolean field you can render or not render the input and output fields.

Pseudo code of the visualforce

<apex:pageblocksection id="section">
    <apex:inputField value="{!acc.Name}" rendered="{!NOT(showOutput)}"/>
    <apex:outputField value="{!acc.Name}" rendered="{!showOutput}" />
<apex:commandButton value="Review" action="{!reviewInputs}" rerender="section"/>

On click of Review button set showOutput to true and rerender the entire section which will hide the input fields and show the output fields.

  • Hi @user77686 if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. Commented Jan 29, 2020 at 13:23

You must log in to answer this question.

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