Goal: Produce a simple, small script which gracefully degrades without JavaScript.<\/p>\n
Note: The HTML below is pulled from a Zope Page Template (with embedded Python), but the code should be easy to dissect.<\/p>\n
Goal: Produce a simple, small script which gracefully degrades without JavaScript. Note: The HTML below is pulled from a Zope Page Template (with embedded Python),…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[12,5],"tags":[37],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/322"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":0,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<div id="tabbed-content" tal:define="currentTab request\/tab|string:cabinets">
\n\t <div class="tabs-wrapper">
\n\t <ul class="tabs">
\n\t <li tal:attributes="class python: test(request.get('tab','') in ['cabinets', ''], 'selected', '')">
\n\t <a href="?tab=cabinets#content" id="tab-cabinets">Cabinets<\/a>
\n\t <\/li>
\n\t <li tal:attributes="class python: test(request.get('tab','') == 'gallery', 'selected', '')">
\n\t <a href="?tab=gallery#content" id="tab-gallery">Gallery<\/a>
\n\t <\/li>
\n\t <li tal:attributes="class python: test(request.get('tab','') == 'specs', 'selected', '')">
\n\t <a href="?tab=specs#content" id="tab-specs">Specifications<\/a>
\n\t <\/li>
\n\t <\/ul>
\n\t <div class="visualClear"><!-- --><\/div>
\n\t <\/div>
\n\t <div id="cabinets" class="tab-body" tal:attributes="class python: test(currentTab == 'cabinets', 'tab-body', 'tab-body initial-hide')">
\n\t content here...
\n\t <\/div>
\n\t <div id="gallery" class="tab-body" tal:attributes="class python: test(currentTab == 'gallery', 'tab-body', 'tab-body initial-hide')">
\n\t content here...
\n\t <\/div>
\n\t <div id="specs" class="tab-body" tal:attributes="class python: test(currentTab == 'specs', 'tab-body', 'tab-body initial-hide')">
\n\t content here...
\n\t <\/div>
\n\t<\/div>
\n\t<\/code><\/p>\n\n\tCSS<\/h3>\n
.tabs-wrapper { margin-bottom: 1em; border-bottom: 1px solid #bbb; }
\n\t.tabs { margin: 0 !important; padding: 7px 0 0 8px; list-style-type: none; list-style-image: none; }
\n\t.tabs li { float: left; display: block; margin: 0 5px -1px 0; padding: 0; font-size: 12px; }
\n\t.tabs li a { padding: 3px 8px 1px 8px; font-weight: bold; color: #444 !important; outline: none !important;
\n\t border: 1px solid #e0e0e0; border-radius: 5px 5px 0 0; background: #e0e0e0; }
\n\t.tabs li.selected { position: relative; margin-top: -2px; top: 2px; }
\n\t.tabs li.selected a { padding-bottom: 3px; border: 1px solid #bbb; border-bottom: 0; background: #fff; }
\n\t.initial-hide { display: none; }
\n\t.visualClear { clear: both; }
\n\t<\/code><\/p>\n\n\tjQuery<\/h3>\n
$('.tabs a').click(function() {
\n\t var activateId = jq(this).attr('id').substring(4); \/\/ get id of tab "body"
\n\t $(this).parent().siblings().removeClass('selected');
\n\t $(this).parent().addClass('selected');
\n\t
\n\t $(this).parent().parent().parent().siblings().hide(); \/\/ hide all tab bodies
\n\t $('#' + activateId).show(); \/\/ show only the selected tab body
\n\t return false;
\n\t});
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"