Menu icon Foundation
Vertical Tabs -- Linking to another page

Hi:

I'm just starting to gain a little experience with Foundation 5. I'm trying to implement a form "wizard" using vertical tabs so users can page their way through sections of a form by clicking on corresponding tabs. It works for each of the tabs that points to on-page content. But for one of my tabs, I'd like the link to point to a different page than the one containing the vertical tab content. I insert the correct url in the href for the 'a' within the 'dd' of the tab, and rolling over the tab I'm shown the correct link url in my browser, but clicking doesn't take me to the new page, it just leaves me where I am on the form.

Is there a way to make this work, or can the tab hrefs only successfully point to "#something" instead of "/users/edit"?

In the attached code, the link that is supposed to point off-page is the '/users/edit' link.

Thanks,

Dean

      <dl class="tabs vertical" data-tab data-options="deep_linking:true scroll_to_content:false">
        <dd class="account_edit">
          <a href="/users/edit" class="account_section_tab">Registration Info</a>
        </dd>
        <dd class="active account_edit">
          <a href="#billing_address" class="account_section_tab">Billing Address</a>
        </dd>
        <dd class="account_edit">
          <a href="#contact_info" class="account_section_tab">Contact Info</a>
        </dd>
        <dd class="account_edit">
          <a href="#payout_settings" class="account_section_tab">Payout Settings</a>
        </dd>
        <dd class="account_edit">
          <a href="#notifications" class="account_section_tab">Notifications</a>
        </dd>
      </dl>
      <%= simple_form_for(@account, url: user_account_path(current_user), html: { method: :put }) do |f| %>
        <div class="tabs-content vertical">
          <%= render :partial => 'users/accounts/billing_address', :locals => { :f => f } %>
          <%= render :partial => 'users/accounts/contact_info', :locals => { :f => f } %>
          <%= render :partial => 'users/accounts/payout_settings', :locals => { :f => f } %>
          <%= render :partial => 'users/accounts/notifications', :locals => { :f => f } %>
        </div> 
      <% end %> 
            

         

vertical tabs

Hi:

I'm just starting to gain a little experience with Foundation 5. I'm trying to implement a form "wizard" using vertical tabs so users can page their way through sections of a form by clicking on corresponding tabs. It works for each of the tabs that points to on-page content. But for one of my tabs, I'd like the link to point to a different page than the one containing the vertical tab content. I insert the correct url in the href for the 'a' within the 'dd' of the tab, and rolling over the tab I'm shown the correct link url in my browser, but clicking doesn't take me to the new page, it just leaves me where I am on the form.

Is there a way to make this work, or can the tab hrefs only successfully point to "#something" instead of "/users/edit"?

In the attached code, the link that is supposed to point off-page is the '/users/edit' link.

Thanks,

Dean

      <dl class="tabs vertical" data-tab data-options="deep_linking:true scroll_to_content:false">
        <dd class="account_edit">
          <a href="/users/edit" class="account_section_tab">Registration Info</a>
        </dd>
        <dd class="active account_edit">
          <a href="#billing_address" class="account_section_tab">Billing Address</a>
        </dd>
        <dd class="account_edit">
          <a href="#contact_info" class="account_section_tab">Contact Info</a>
        </dd>
        <dd class="account_edit">
          <a href="#payout_settings" class="account_section_tab">Payout Settings</a>
        </dd>
        <dd class="account_edit">
          <a href="#notifications" class="account_section_tab">Notifications</a>
        </dd>
      </dl>
      <%= simple_form_for(@account, url: user_account_path(current_user), html: { method: :put }) do |f| %>
        <div class="tabs-content vertical">
          <%= render :partial => 'users/accounts/billing_address', :locals => { :f => f } %>
          <%= render :partial => 'users/accounts/contact_info', :locals => { :f => f } %>
          <%= render :partial => 'users/accounts/payout_settings', :locals => { :f => f } %>
          <%= render :partial => 'users/accounts/notifications', :locals => { :f => f } %>
        </div> 
      <% end %> 
            

         
Nic Edwards about 5 years ago

It looks like the JS will only allow a link to the tabbed content.

tony about 5 years ago

Is there a way to mix tabbed content with links to other pages?

Stanley Ahuchogu over 4 years ago

Well, you can achieve this by using an onclick event on the dd element.

<dd onclick="location.href='http://mypage.html'"><a href="#">Page Name</a></dd>