web: Tabs Control not working as expected in ASP.net MVC

mardi 5 mai 2020

Tabs Control not working as expected in ASP.net MVC

I tried to implement Tab controls. However, when I run the page, the 1st instance will have all the fields from other tabs visible in the 1st tab itself. If I click on 2nd tab and then comeback to 1st tab, I works as expected.

View:

<style>
        .tabs {
            height: 1475px; width: 100%; text-align: left; }

        .tab-nav-wrapper {
            width: 100%; overflow-x: auto; position: relative !important; z-index: 999 !important; top: 3px; }

        .tabs ul {
            display: block; overflow-y: hidden; margin: 0px; }

            .tabs ul li {
                display: inline-block; border: 1px solid grey; border-bottom: 3px solid blue; background-color: white; }

                .tabs ul li.active {
                    border: 1px solid black; border-bottom: 3px solid white; }

                .tabs ul li a {
                    text-decoration: none; color: blue; padding: 10px; line-height: 25px; position: relative; font-weight: bold; }

        .tab-content-wrapper {
            position: relative !important; z-index: 1 !important; border: 3px solid blue; padding: 20px; min-height: 40px; }

        .tab-content {
            display: block; height: 700px; width: 100%; }
</style>
<body>
        <div class="tabs">
            <div class="tab-nav-wrapper">
                <ul>
                    <li id="tab1Section" class="active"><a href="#tab1">Corporation Details</a></li>
                    <li id="tab2Section"><a href="#tab2">Contact Information</a></li>
                    <li id="tab3Section"><a href="#tab3">Documents</a></li>
                </ul>
            </div>
            <div class="tab-content-wrapper">
                <div id="tab1" class="tab-content">
                    Content 1
                </div>
                <div id="tab2" class="tab-content">
                    Content 2
                </div>
                <div id="tab3" class="tab-content">
                    Content 3
                </div>
            </div>
       </div>
</body>

<script>
  $(document).ready(function () {
    $(".tab-nav-wrapper li").click(function (e) {
      e.preventDefault();
      e.stopPropagation();

      $(".tab-nav-wrapper li").removeClass("active");
      $(this).addClass("active");

      var target = $(this).find("a").attr("href");
      $(".tab-content-wrapper").find(".tab-content").hide();
      $(".tab-content-wrapper").find(target).show();
    })
  });
</script>

Below is the result I have. As you can see, last field in the tab 1 is the button. But, I am getting that Tab 2 connect below that and tab 3 content after tab 2.