Create Tabs and show hide on Click using JavaScript in ASP.Net

How to use tab in html

I am creating 2 tab all friends and paris.

1 tab click all friend show

2 tab name paris click after another data show.

But 1 tab click after data not show. Pls check

<%@ Page Language="C#" MasterPageFile="~/USER/MasterPage2.master" AutoEventWireup="true" CodeFile="Friends.aspx.cs" Inherits="USER_Friends" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table  style="width:100%" class="pimg">
    <tr>
        <td  style="height:40px;">
           Friends(<asp:Label ID="lblfcnt" runat="server"></asp:Label>)</td>
    </tr>
    <tr>
    <td>
    <div class="tab">
  <button class="tablinks" onclick="openCity(event, 'ALL Friends')">ALL Friends</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
</div>
    </td>
    </tr>    
    <tr>
        <td>
        <div id="ALL Friends" class="tabcontent">
              <asp:DataList ID="DataList1" runat="server" RepeatColumns="2" Width="100%" 
                  HorizontalAlign="Center" RepeatDirection="Horizontal" 
                   CellSpacing="3">
                    <ItemTemplate>
                        <table style="width:100%;" class="table">
                            <tr style="margin:10px;" class="pimg">
                                <td class="style23" rowspan="2">
                                    <asp:Image ID="Image7" runat="server"  ImageUrl='<%#Eval("imagedata") %>' CssClass="img12" />
                                </td>
                                <td class="style22" colspan="2">
                                    <asp:Label ID="lblname" runat="server" Text='<%#Eval("First_name") %>' Font-Names="verdana" Font-Size="8pt" ></asp:Label>
                                       <asp:Label ID="Label1" runat="server" Text='<%#Eval("Last_name") %>'  Font-Names="verdana" Font-Size="8pt"></asp:Label>
                                       <br />
                                       <br />                                       
                          <asp:LinkButton ID="lnlmfriend" runat="server" Text="Mutual Friend" ForeColor="Black" Font-Size="8pt" Font-Names="Verdana"></asp:LinkButton>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <asp:Button ID="btnfrnd" runat="server" Text="Friend" CssClass="pimg" Height="30px" Width="60px" />
                                </td>                              
                            </tr>
                            <tr>
                                <td class="style22">
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="style23">
                                    &nbsp;</td>
                                <td class="style22">
                                    &nbsp;</td>
                                <td>
                                    &nbsp;</td>
                            </tr>
                        </table>
                    </ItemTemplate>
                </asp:DataList>
               </div>
            </td>
    </tr>
    <tr>
        <td>
            <div id="Paris" class="tabcontent">
            <h1>
            ASHISH
            </h1>
</div>
</td>
    </tr>
</table>
</asp:Content>

    bal.MYFRIENDLIST MFL = new bal.MYFRIENDLIST();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack == false)
        {
            SHOWHRND();
        }
    }
    private void SHOWHRND()
    {
        try
        {

        DataSet odt;
        odt = MFL.SHOWFRNDLIST(Convert.ToInt32(Session["uid"].ToString()));
        if (odt != null)
        {
            if (odt.Tables[0].Rows.Count > 0)
            {
                lblfcnt.Text = odt.Tables[0].Rows.Count.ToString();
                DataList1.DataSource = odt;
                DataList1.DataBind();
            }
        }
        }
        catch (Exception ex)
        {
        }
    }