Monitor Reply

Support

Wrap Tab/Accordion Heading with

Permalink Browser Info Environment April 22, 2024 at 5:24 PM

Is there a relatively simple way to wrap the tab heading text with <h2></h2>? I don't want to modify the styling to match the theme's H2 styling, I just want the header text to render as H2 and inherit that style.

No other issues so far-- many thanks for developing something so incredibly useful!

1 Attachment

Type:	Ticket
Status:	Resolved

JohntheFish replied on Apr 22, 2024 at 6:47 pm Permalink Reply

The way MT wraps tab headings is defined by the tab block template. None of the existing templates use <hx>, so you will need to create your own template as described inhttps://c5magic.co.uk/addons/magic-tabs/developing-tab-templates...

Not that the code in a MT template provides a proforma, it is not the actual code used, but a representation which is then manipulated and replicated by MT to wrap blocks.

Taking the default template as an example, and calling the new template jl_magic_tabs_default_h2, the important part would be something like:

<div id="<?php echo $setname; ?>_proforma"
         class="ccm-ui jl_magic_tabs_proforma jl_magic_tabs_default_h2 <?php echo $setname; ?>"
         style="display:none;"
         data-selected-class="active
    >
        <ul id="<?php echo $setname; ?>_proforma_inner_container"
            class="nav-tabs nav" role="tablist">
            <li id="<?php echo $setname; ?>_proforma_tab_element" class="nav-item" role="tab">
               <h2><a class="nav-link"></a></h2>
            </li>
        </ul>
        <div style="clear:both"></div>
    </div>

Whilst this wraps the tab heading links in an <h2>, the actual styling will be whatever the theme css does under such circumstances.

mmartinpdx replied on Apr 23, 2024 at 4:03 pm Permalink Reply

so, this code adopts the <H2></H2> styling but doesn't do anything:

<ul id="<?php echo $setname; ?>_proforma_inner_container"
            class="magic_tabs" role="tablist">
            <li id="<?php echo $setname; ?>_proforma_tab_element" role="tab">
            <h2><a class="nav-link"></a></h2></li>
        </ul>

whereas this code works but retains default tab styling:

<ul id="<?php echo $setname; ?>_proforma_inner_container"
            class="magic_tabs" role="tablist">
            <li id="<?php echo $setname; ?>_proforma_tab_element" role="tab">
            <a class="nav-link"><h2></h2></a></li>
        </ul>

If I inspect the rendered HTML, I don't even see "<h2></h2>".

I think my best option at this point is to just address this via CSS and style the anchor tag to match the theme's default styling for H2. There's no non-presentation case for the header tag that justifies further modification to code that works just fine as is.

We can mark this one as 'resolved'-- many thanks for your time!

JohntheFish replied on Apr 23, 2024 at 5:01 pm Permalink Reply

I am not surprised. The styling of tabs comes from the tabs css, so I would expect to be stronger than anything that could come from the theme, even when the tabs render with H2 elements.

As you have suggested, adjusting the font/size of the tabs in the css of your template and forgetting the actual H2 elements will be the best option going forwards.

Magic Tabs

Support

Wrap Tab/Accordion Heading with

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post