We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

"tabbed" content

    • 14779
    • 256 Posts
    joshlfisher Reply #1, 16 years, 9 months ago
    I followed the instructions here: http://wiki.modxcms.com/index.php/Tabbed_content

    and successfully created a tabbed content page that pulls three different pages from separate chunks.

    I have an icon that is static on all my pages, and I’d like the icon to link to the third page on this tabbed page.

    See here: http://ww4wusa.com/conference-registration.html

    The icon is the envelope icon at the VERY bottom of all pages. It should link to the third tab on the page I linked above. However, whenever I load this page, it always goes to the first tab.
      PM me to find out how you can get a FREE ipad 2!
      • 27672
      • 168 Posts
      slush puppie Reply #2, 16 years, 9 months ago
      since all of your switching is done by javascript i think you would need to do something like parse the url in a snippet (probably in a switch statement) and then, based on what you found, trigger this type of call:
      <script type="text/javascript">
doShow(this, 'three');
</script>

      so in your resource you’d have:
      the html
[!tabJumperSnippet!]


      which would load the content, then you’d replicate the onclick event of that tab via the snippet. i think that should work, or at least that’s how i would start trying to accomplish this.
        • 14779
        • 256 Posts
        joshlfisher Reply #3, 16 years, 9 months ago
        I know absolutely no php or javascript, and only got this working because I can copy/paste like a pro. smiley

        My workaround is to duplicate the page, change the class="active" and point the newsletter link to this new page.
        It’s redundant, but it works.


        I have another question:

        Can I import three different pages in as the content for the three different tabs? Right now they are chunks, and the client would like to be able to edit them using a RTE.
          PM me to find out how you can get a FREE ipad 2!
          • 27672
          • 168 Posts
          slush puppie Reply #4, 16 years, 9 months ago
          you could probably use the http://wiki.modxcms.com/index.php/Ditto snippet to pull the content from 3 separate resources. it’d require setting up a template to be called for each "tab".
            • 27672
            • 168 Posts
            slush puppie Reply #5, 16 years, 9 months ago
            okay i setup an example using ditto: http://www.gregtitcomb.com/tab-demo

            here’s the content of the "tab-demo" resource:
            <div id="tabs">
<div id="nav">
<ul>
[!Ditto? &parents=`57` &tpl=`tabLinks` &sortBy=`createdon ASC`!]
</ul>
</div>
<div id="data">
[!Ditto? &parents=`57` &tpl=`tabData` &sortBy=`createdon ASC`!]
</div>
</div>

            then create your three resources underneath "tab-demo".
            in the title field name them "one", "two", "three".
            in the description field of the first one enter put ’class="active"’.
            then put the content in each.

            ’tabData’ chunk:
            <div id="[+pagetitle+]" [+description+]>
        [+content+]
</div>

            ’tabLinks’ chunk:
            <li onclick="javascript:doShow(this, '[+pagetitle+]');" [+description+]>[+pagetitle+]</li>

            that should get you started.
              • 14779
              • 256 Posts
              joshlfisher Reply #6, 16 years, 9 months ago
              Duhh.... use ditto. I knew that! I must have accidentally gotten a hold of some decaf....

              Ginormous Thanks!
                PM me to find out how you can get a FREE ipad 2!