Changing visibility of text/controls in a visual web part

Question

I need to show/hide a section of text and controls in a visual web part when a button is clicked. I've seen references to doing this via JS but can't connect the dots for how to integrate that into the web part. The examples are all for straight ASP development where you can register the script in the page header.

Basically I have a region inside an UpdatePanel like this...

<asp:Button ID="Show" runat="server" OnClick="Show_Click" Text="Show" />
<asp:Button ID="Hide" runat="server" OnClick="Hide_Click" Text="Hide" />
<div id="div000">
    <strong>Phase 1</strong>
    <br />
    <asp:CheckBox ID="CheckBox1" runat="server" Text="Pre-Sales/Sales" />
    <br />
    <asp:CheckBox ID="CheckBox2" runat="server" Text="Web Search" />
</div>

...and I need the button click events to set that div to visible/hidden. I've read that a simple JS function is the way to go but I'm confused about exactly where to put it and how to call it, and again, those instructions came from an ASP development site, not a SP development site so I don't know if they still apply in this case.

Answer 1

First of all, you have an update panel. With that you have a few options.

You could wire up a server side event to your button and hide the div on button click. The button click would cause an Async Postback which would just update the content inside of your update panel.

One issue with your code is you are using normal html elements. To make your elements available on the server side change it to this.

<asp:Button ID="Show" runat="server" OnClick="Show_Click" Text="Show" />
<asp:Button ID="Hide" runat="server" OnClick="Hide_Click" Text="Hide" />
<asp:Panel id="div000" runat="server">
    <strong>Phase 1</strong>
    <br />
    <asp:CheckBox ID="CheckBox1" runat="server" Text="Pre-Sales/Sales" />
    <br />
    <asp:CheckBox ID="CheckBox2" runat="server" Text="Web Search" />
</asp:Panel>

You will notice that div is now asp:Panel, which is the asp version of a div. It also has the element runat="server" just like your buttons.

You can now make the buttons hidden during the Async Postback from your functions.

void Hide_Click(Object Sender, EventArgs e)
{
   div000.Visble=false;
}

void Show_Click(Object Sender, EventArgs e)
{
   div000.Visble=true;
}

When the Async Postback ends, the panel will be rendered in it's new form.

If you are able to not use the updatepanel you can go with the Malin's solution.

As Ted said, the update panel will reset the state of your div and it will no longer be hidden.

If you were to change the asp.net markup to use the panel with the javascript option, remember that IDs are changed to reflect the position in the DOM so you'll need to change the javascript to:

$('#Hide').on('click',function(e){$('#<%= div000.ClientID %>').hide(); });

$('#Show').on('click',function(e){$('#<%= div000.ClientID %>').show(); });

Which prints the real ID of the panel/div to the page when it is rendered.

If you go with the jQuery, you'll need to include jQuery in your project somehow.

Also change your buttons to look like:

<asp:Button ID="Show" UseSubmitBehavior="false" runat="server" Text="Show" />
<asp:Button ID="Hide" UseSubmitBehavior="false" runat="server" Text="Hide" />

Answer 2

This should work.

$('#Hide').on('click',function(e){$('#div000').hide(); });

$('#Show').on('click',function(e){$('#div000').show(); });

Add this inside the page load event.

Answer 3

Well, you can still register scripts in a Web Part through the ScriptLink control:

<Sharepoint:ScriptLink ID="ctlScriptLink" runat="server" Name="file.js"></Sharepoint:ScriptLink>

You can also just embed the JS in a script tag in your web part for the time being to test if the code works (or use a content editor web part on the page).

However, I think in this case you don't want to use JavaScript to hide the div - clicking the Button will probably cause the update panel to refresh and the div will come back visible again. Instead, you might want to make the Div a server control (add runat='server' to the div tag) and then in your Show_Click event, you can use:

div000.Visible = false;

to hide the div.

If the button doesn't cause a postback, then to get your buttons to hide the div, you can use the OnClientClick attribute of the Button.

<asp:Button ID="Hide" runat="server" OnClick="Hide_Click" OnClientClick="hideCheckboxDiv();" Text="Hide" />

<script type="text/javascript">
function hideCheckboxDiv()
{
     document.getElementById('div000').style.display = 'none';
}
</script>

(You might just want to make it a <button> instead of an <asp:Button> and use the onClick attribute instead, too, if you aren't executing any server-side code in the button click.)

Hope this helps!