Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • strawberrylatte 34 posts 103 karma points
    Mar 19, 2021 @ 01:16
    strawberrylatte
    0

    Making a tab

    Hello, I would like help on making a tab in my page, I'm using nested content for the tab field, which consist of title and content. My current issue right now is that the titles are in one button and I would like for them to be separated. There are some other issues with the tab and I'm not sure where to fix.

    Can anyone help?

    <div class="tab">
                    <button class="tablinks" onclick="openCity(event, 'tab-@tabsCount')">
                        @{
                        var tabs = Model.Value<IEnumerable<IPublishedElement>>("tabs");
                        var tabsCount = 1;
                        }
                        @foreach (var tab in tabs)
                        {
    
                        var name = tab.Value<string>
                        ("title");
    
    
                        <span>@name@(tabsCount != tabs.Count() ? "," : null)</span>
                        tabsCount++;
                        }
                    </button>
    
                </div>
                <div id="Tabs" class="tabcontent">
    
                    <p>
                        tabsCount = 1;
                        @foreach (var tab in tabs)
                        {
    
                        var name = tab.Value<string>
                        ("content");
    
    
                        <div id="tab-@tabsCount">@tab.Value("content");</div>
                        tabsCount++;
                        }
    
                        @{
    var contenttabs = Model.Value<IEnumerable<IPublishedElement>
    >("tabs");
    var contenttabsCount = 1;
    }
    
  • strawberrylatte 34 posts 103 karma points
    Mar 19, 2021 @ 06:16
    strawberrylatte
    0

    anyone?

  • Dave Woestenborghs 3504 posts 12135 karma points MVP 9x admin c-trib
    Mar 19, 2021 @ 08:03
    Dave Woestenborghs
    0

    Hi,

    Can you tell me what you are trying to achieve ? I also spotted a error already in your code

    You are using tabsCount variable in this line.

    <button class="tablinks" onclick="openCity(event, 'tab-@tabsCount')">
    

    But that is not defined yet. That is done a few lines later.

    Dave

  • strawberrylatte 34 posts 103 karma points
    Mar 19, 2021 @ 08:17
    strawberrylatte
    0

    I am trying to achieve this, https://www.w3schools.com/howto/howtojstabs.asp
    and so far I couldn't get the tab buttons to work

  • Dave Woestenborghs 3504 posts 12135 karma points MVP 9x admin c-trib
    Mar 19, 2021 @ 09:35
    Dave Woestenborghs
    1

    Hi,

    I thinks this will work :

    <!-- Tab links -->
    <div class="tab">
        @{
            var tabCounter = 1;
        }
        @foreach (var tab in Model.Value<IEnumerable<IPublishedElement>>("tabs"))
        {
            <button class="tablinks" onclick="openCity(event, 'tab-@tabCounter')">
                @(tab.Value<string>("title"))
            </button>
    
            tabCounter++;
        }
    
    </div>
    
    <!-- Tab content -->
    @{
        tabCounter = 1;
    }
    @foreach (var tab in Model.Value<IEnumerable<IPublishedElement>>("tabs"))
    {
        <div id="tab-@tabCounter" class="tab-content">
            @tab.Value("content")
        </div>
        tabCounter++;
    }
    

    Dave

  • strawberrylatte 34 posts 103 karma points
    Mar 22, 2021 @ 01:08
    strawberrylatte
    0

    Thanks Dave, but may I know why this happen?

    enter image description here

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Mar 22, 2021 @ 19:58
    Huw Reddick
    0

    Did you add CSS to hide the ,ta content class?

  • strawberrylatte 34 posts 103 karma points
    Mar 23, 2021 @ 00:17
    strawberrylatte
    0

    This is my css

    .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    }
    
    .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    }
    
    
    .tab button:hover {
    background-color: #ddd;
    }
    
    
    .tab button.active {
     background-color: #ccc;
     }
    .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
        }
    

    And this is my JQuery

    function openCity(evt, tabs) {
            // Declare all variables
            var i, tabcontent, tablinks;
    
            // Get all elements with class="tabcontent" and hide them
            tabcontent = document.getElementsByClassName("tab-content");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
    
            // Get all elements with class="tablinks" and remove the class "active"
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
    
            // Show the current tab, and add an "active" class to the button that opened the tab
            document.getElementById(tabs).style.display = "block";
            evt.currentTarget.className += " active";
        }
    
  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Mar 23, 2021 @ 08:45
    Huw Reddick
    1

    your tabs have a class of class="tab-content" but your css style is set on .tabcontent not .tab-content

  • strawberrylatte 34 posts 103 karma points
    Mar 25, 2021 @ 01:02
    strawberrylatte
    0

    may I know how I can display the first tab content on default?

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Mar 25, 2021 @ 07:48
    Huw Reddick
    0

    You need to call your JavaScript function when the page loads so it displays the first tab

  • strawberrylatte 34 posts 103 karma points
    Mar 26, 2021 @ 02:02
    strawberrylatte
    0

    can you help with the code? I tried doing this

     <div class="tab">
                    @{
                        var tabCounter = 1;
                    }
                    @foreach (var tab in Model.Value<IEnumerable<IPublishedElement>>("tabs"))
                    {
    
    
                        <button class="tablinks" onclick="openTab(event, 'tab-@tabCounter')" id="defaultOpen">
                            @(tab.Value<string>("title"))
                        </button>
    
                            tabCounter++;
    
                            }
    
                    </div>
    

    And added document.getElementById("defaultOpen").click(); in the function But, I don't think its the right way

  • Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib
    Mar 26, 2021 @ 16:06
    Huw Reddick
    0

    could you show us all your code, both the html for the tabs and your javascript it is difficult to gie a proper response without seeing exactly what you have done.

Please Sign in or register to post replies

Write your reply to:

Draft