making a tab

strawberrylatte 34 posts 103 karma points

Mar 19, 2021 @ 01:16

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;
}

Copy Link

strawberrylatte 34 posts 103 karma points

Mar 19, 2021 @ 06:16

anyone?

Copy Link

Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Mar 19, 2021 @ 08:03

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

Copy Link

strawberrylatte 34 posts 103 karma points

Mar 19, 2021 @ 08:17

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

Copy Link

Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Mar 19, 2021 @ 09:35

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

Copy Link

strawberrylatte 34 posts 103 karma points

Mar 22, 2021 @ 01:08

Thanks Dave, but may I know why this happen?

enter image description here

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 22, 2021 @ 19:58

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

Copy Link

strawberrylatte 34 posts 103 karma points

Mar 23, 2021 @ 00:17

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";
    }

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 23, 2021 @ 08:45

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

Copy Link

strawberrylatte 34 posts 103 karma points

Mar 25, 2021 @ 01:02

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

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 25, 2021 @ 07:48

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

Copy Link

strawberrylatte 34 posts 103 karma points

Mar 26, 2021 @ 02:02

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

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Mar 26, 2021 @ 16:06

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.

Copy Link

is working on a reply...

Flag this post as spam?

Making a tab