Hide show different section of page javascript ASP.NET

I have a web page where when the user clicks on a menu section it show a new section. However when I select a datagrid row The First section (Buscar) is shoween. However I want to show the section where the user is in.

Here is the javascript code.

<script type="text/javascript">
   var menu = ""; // document.getElementById('PageContent_menuSection').textContent;

    function InitalShowAndHide() {
        menu = "search";
        var w = document.getElementById("AddLocationSection");
        w.style.display = "none";
        var x = document.getElementById("PageContent_btnExpandMenu");
        x.style.display = "none";
        var y = document.getElementById("PurchaseSection");
        y.style.display = "none";
        var z = document.getElementById("ChangeQuantitySection");
        z.style.display = "none";
        document.getElementById("PageContent_btnMenuSearch").style.backgroundColor = "#A6A6A6";

    }
    function showAllFunction() {
        var y = document.getElementById("PageContent_btnExpandMenu");
        var z = document.getElementById("PageContent_btnCollapseMenu");
        var x = document.getElementById("PageContent_secondMenuContent");
        x.style.display = "block";
        y.style.display = "none";
        z.style.display = "block";
    }
    function hideAllFunction() {
        var y = document.getElementById("PageContent_btnExpandMenu");
        var z = document.getElementById("PageContent_btnCollapseMenu");
        var x = document.getElementById("PageContent_secondMenuContent");
        x.style.display = "none";
        y.style.display = "block";
        z.style.display = "none";
    }        

    function showSearchSectionFunction() {
        menu = "search";
        document.getElementById("PageContent_btnSearchMenu").click();
        var w = document.getElementById("AddLocationSection");
        w.style.display = "none";
        var x = document.getElementById("PageContent_searchSection");
        x.style.display = "block";
        var y = document.getElementById("PurchaseSection");
        y.style.display = "none";
        var z = document.getElementById("ChangeQuantitySection");
        z.style.display = "none";
        document.getElementById("PageContent_btnMenuSearch").style.backgroundColor = "#A6A6A6";
        document.getElementById("PageContent_btnMenuPurchase").style.backgroundColor = "#333";
        document.getElementById("PageContent_btnMenuChangeQuantity").style.backgroundColor = "#333";
        document.getElementById("PageContent_btnMenuAddLocation").style.backgroundColor = "#333";
        showAllFunction();
    }

    function menuSelectedLoad()
    {
        if (menu == "search")
        {
            showSearchSectionFunctionNoClick();
        }
        if (menu == "purchase")
        {
            showPurchaseSectionFunctionNoClick();
        }
        if (menu == "changeQuantity")
        {
            showChangeQuantitySectionFunctionNoClick();
        }
        if (menu == "addLocation")
        {
            showChangeQuantitySectionFunctionNoClick();
        }
    }

</script>

Here are the buttons in the aspx file.

 <asp:Button class="btn-second-menu" ID="btnMenuSearch" runat="server" Text="Buscar"  OnClientClick="showSearchSectionFunction(); return false;" />  
        <asp:Button class="btn-second-menu" ID="btnMenuPurchase" runat="server" Text="Comprar"  OnClientClick="showPurchaseSectionFunction(); return false;"  />                              
        <asp:Button class="btn-second-menu" ID="btnMenuChangeQuantity" runat="server" Text="Cambiar la cantidad" OnClientClick="showChangeQuantitySectionFunction(); return false;"  />       
        <asp:Button class="btn-second-menu" ID="btnMenuAddLocation" runat="server" Text="Agrega un lugar"  OnClientClick="showAddLocationSectionFunction(); return false;"/>    
        <asp:ImageButton ID="btnCollapseMenu" ImageUrl="~/images/minimize.png" runat="server"  Width="20px" Height="20px"  OnClientClick="hideAllFunction(); return false;" CssClass="second-menu-icon"/>   
        <asp:ImageButton ID="btnExpandMenu" ImageUrl="~/images/maximize.png" runat="server"  Width="20px" Height="20px"  OnClientClick="showAllFunction(); return false;" CssClass="second-menu-icon"/>                             

Here is what happens on the page load.

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack)
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "showAndHideOnPageLoad", "InitalShowAndHide();", true);
    }
    Page.ClientScript.RegisterStartupScript(this.GetType(), "menuSelected", "menuSelectedLoad();", true);

}

Here is what happens when the user clicks on a row in the datagrid.

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    foreach (GridViewRow row in gvInventario.Rows)
    {
        if (row.RowIndex == gvInventario.SelectedIndex)
        {
    Page.ClientScript.RegisterStartupScript(this.GetType(), "menuSelected", "menuSelectedLoad();", true);

    if (menuClicked == "search")
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowSearchOnSearchClick", "showSearchSectionFunction();", true);
    }


    if (menuClicked == "purchase")
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowPurchaseOnSearchClick", "showPurchaseSectionFunction();", true);
    }

    if (menuClicked == "changeQuantity")
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowchangeQuantityOnSearchClick", "showChangeQuantitySectionFunction();", true);
    }

    if (menuClicked == "addLocation")
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowAddLocationOnSearchClick", "showAddLocationSectionFunction();", true);
    }
}

However the javascript does not yield the result I would have hope for. Any help would be appreciated. Thank you.