Rationale

As we know the jQuery UI Tabs transform tabs based on the following code, which is not good for SEO and also does not make sense when user's web browser does not support javascript.

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab title 1</a></li>
    <li><a href="#tabs-2">Tab title 2</a></li>
  </ul>
  <div id="tabs-1">tab</div>
  <div id="tabs-2"></div>
</div>

So the idea is let js to grab titles and content from the default style of panels to create a tab region.

<h2 class="pane-title">Title</h2>
<div class="pane-content">Body</div>

Once a new tab has been created, then hide original style of pane

I have modified the code and it works. Please check attachment.

Any thoughts?

- Eric

CommentFileSizeAuthor
#6 1526742-6-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch1.27 KBzhangtaihao
#3 1526742-3-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch767 byteszhangtaihao
#2 1526742-2-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch996 byteszhangtaihao
#1 1526742-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch998 byteszhangtaihao
panels_tabs.zip10.01 KBeric.chenchao

Comments

zhangtaihao’s picture

zhangtaihao commented
Title: SEO friendly and no-Javascript friendly » Hide pane title only with Javascript
Status: Active » Needs review
StatusFileSize
new 1526742-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch998 bytes

I'm afraid the HEAD of the module has moved beyond the point where we can tell what modification you've made in the module you've uploaded.

I've rolled a patch against 7.x-1.x-dev to achieve more or less the same results (I hope). Could you please check if this patch agrees with what you did?

P.S. I would argue this is a bug since removing the pane title breaks accessibility. However, I'll leave it up to you to decide and to mark the patch as RTBC.

zhangtaihao’s picture

zhangtaihao commented
StatusFileSize
new 1526742-2-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch996 bytes

I have amended the patch to select:

.ui-tabs-panel .panel-pane > .pane-title

instead of:

.ui-tabs-panel > .panel-pane > .pane-title

This should make it work for the Panels IPE.

zhangtaihao’s picture

zhangtaihao commented
StatusFileSize
new 1526742-3-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch767 bytes

Another patch fix that does not hide nested pane titles directly under tabs.

socialnicheguru’s picture

socialnicheguru commented

git apply 15*
error: patch failed: js/panels_tabs.js:8
error: js/panels_tabs.js: patch does not apply

zhangtaihao’s picture

zhangtaihao commented

Hmm.. Don't know why it wouldn't.

In any case, you could check the patch against panels_tabs.js yourself.

zhangtaihao’s picture

zhangtaihao commented
StatusFileSize
new 1526742-6-by-cityreader-zhangtaihao-Hide_pane_title_only_with_javascript.patch1.27 KB

In any case, I forgot to include the panels_tabs.module changes in #3.

Here's a re-roll against 7.x-1.x incorporating both #2 and #3.

socialnicheguru’s picture

socialnicheguru commented

this patch works when I use panels_tabs