FANDOM


  • Getting back into editing, I realized that the infobox needed some cleaning up, as it was getting excessively large and extended the page twice fold. Seeking solutions, I used tabbers to break the infobox into multiple sections, which did do the job. The question I came here with is, "Is it possible to make the navigation tabs collapsable, where the title of the tab is still present, but you just need to click on the title to activate/reveal the contents?"

    Link to page/navigation template I'm currently using Here.

      Loading editor
    • Right now, each of the tab titles is displayed at the top. To reveal the contents of the tab, you click the associated title. I don't understand how this is different from what it currently does. Could you explain a bit more what you are thinking of having it do?

        Loading editor
    • In other words, I'm seeking to completely hide the contents, not one or the other, both. I want to do this to remove clutter. A more descriptive, but possibly may throw you off track, is that I do not want to see any of the content, unless clicked on the tab titles, which i'm hoping to be able to just click on the title to hide/show it as if it was a collapsable button, but will automatically close and open the other tab if the other title is chosen. I hope this adds clarity.

        Loading editor
    • I see. Unfortunately, there is no ready-made way to do this. I think it could be done but would require both custom JS and a switch from tabs to collapsible content. I haven't tested it but it might be possible to use just CSS to get something close to what you want. Once a tab has been "opened", there would be a "close" tab the view can click to "close" the current content. I'll post another reply when I am done playing with the idea to see if it works.

        Loading editor
    • I'm sorry to ask this of you, but i noticed that on some pages the tabber's titles are appearing "squashed" between the infobox and the edge of the article page. This is due to the infobox surpassing the article in length. Is there a simple fix to the template/css that'll prevent this problem? 

      link to an example page: Example Example 2

      Note: As the time is 23:30, I'll be signing off for the night, therefor i'll see your messages at aprox. 07:20. Thank you for all the time you've spent attempting to help so far!

        Loading editor
    • Okay, first, let's deal with "closing" the tabs. Here is my proposed solution. For the template, use a dummy first tab and enclose the tabber in a give with the class "closable_tabber" so we can differentiate the closable ones from regular ones.

      <div class="closable_tabber">
      <tabber>
      |-|Close Tab=
      |-|Tab 1 = Tab 1 Content
      |-|Tab 2 = Tab 2 Content
      </tabber>
      </div>
      

      Then, we hide it with this CSS.

      .closable_tabber .tabbernav li.tabberactive:first-of-type {
          visibility: hidden;
          flex-grow: initial;
      }
      .closable_tabber .tabbertab:first-of-type {
          display: none !important;
      }

      This will make sure that the content of the dummy tab is always hidden and that the dummy tab is hidden while it is the active tab (i.e. while the tabs are "closed"). When the dummy tab is not active (i.e. another tab is open), the dummy tab will be shown and can be clicked on to "close" the current tab.

      As for the issue with long infoboxes, try changing the template to something like this:

      <br style="clear: both;" />
      <tabber>
      <!-- your stuff here -->
      </tabber>
      

      Edit:

      Changed suggested CSS to better accommodate your current styling.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.