Section 1: Explanation
Pure HTML/CSS bookmarkable tabs (by URL hash) using IDs and sibling selectors. The jump links in tabs 3 and tabs 4 use vanilla JavaScript—see tab 3 for instructions. GitHub repo with code here.
If you just need bookmarkable CSS tabs, no JavaScript is necessary. For jump links to content within a tab, you need the JavaScript to read the HTML data-link attributes in the subheadings.
The code is expansible and allows for fewer or more tabs (with related sections), provided these follow the naming convention for IDs with ordered numbers e.g. #section01, #section02 … etc.
Section 2: just text
Content in tabbed sections like this, with no internal jump links, works with CSS, no need for JavaScript.
Coconut rice butternut mix seeds burritos raspberries cherry bomb pepper roasted brussel sprouts macadamia nut cookies delightful blueberry scones dragon fruit cinnamon toast summer fruit salad blood orange smash blueberry pops smoked tofu Bolivian rainbow pepper naga viper miso turmeric glazed aubergine kung pao pepper Thai sun pepper Thai apples. Sicilian pistachio pesto cookies main course blueberries salted dill vitamin glow a delicious meal roasted peanuts chocolate peanut butter dip udon noodles tahini drizzle chili golden cayenne pepper lavender lemonade plums alfalfa sprouts fiery fruit enchiladas creamy cauliflower alfredo bananas miso dressing coriander. Ginger carrot spiced juice sriracha pecans dark and stormy cremini mushrooms apricot seasonal scotch bonnet pepper cherries summertime green papaya salad rich coconut cream coconut sugar sweet potato cranberry spritzer earl grey latte cherry bomb arugula salad cinnamon street style Thai basil tacos black beans red amazon pepper coconut milk winter Caribbean red habanero raspberry fizz.
Section 3: text with jump links
Text that contains jump links to subsections within a tab’s content needs JavaScript. In this tab and tab 4 there are three linked subsections. You can add as many subsections as you like if you match each data-link attribute to its corresponding ID:
LINK to the section:
<li><a data-link="section03_jump01"
href="#section03">Subsection 01</a>
</li>
THEN in the section:
<h3 id="section03_jump01" class="toplinkheader">
Subsection 01
<a data-link="top03"
href="#section03">⇧</a>
</h3>
JavaScript handles the datalink attributes for the jump links to each section (and back to "top03") while staying on the same tab.
Subsection 01 ⇧
Falafel bites double dark chocolate bite sized bento box tahini drizzle shallots red pepper mediterranean luxury bowl leek Bulgarian carrot lemongrass kale casserole heat macadamia nut cookies kung pao pepper chocolate cookie green bowl red curry tofu noodles lime mango crisp dessert Thai super chili. Cauliflower ginger lemongrass agave green tea Malaysian fig arugula cashew salad lemon red lentil soup sriracha pecans hazelnut shiitake asian pear mint blackberries grapefruit creamy cauliflower alfredo overflowing berries summertime cayenne tasty cilantro.
Subsection 02 ⇧
Ginger carrot spiced juice sriracha pecans dark and stormy cremini mushrooms apricot seasonal scotch bonnet pepper cherries summertime green papaya salad rich coconut cream coconut sugar sweet potato cranberry spritzer earl grey latte cherry bomb arugula salad cinnamon street style Thai basil tacos black beans red amazon pepper coconut milk winter Caribbean red habanero raspberry fizz.
Subsection 03 ⇧
Refreshing cucumber splash oranges chili pepper dragon fruit Thai sun pepper mediterranean vegetables mint lime taco salsa broccoli vitamin glow peach strawberry mango Thai mangos crispy iceberg lettuce naga viper chilies cherry paprika spring almond milk chai latte thyme apple vinaigrette main course bruschetta picnic salad summer veggie burgers maple orange tempeh. Habanero golden spiced peppermint blast seeds smoky maple tempeh glaze hearty mocha chocolate roasted butternut squash winter strawberry spinach salad banana bread tempeh.
Section 4: subsections with jump links
Subsection One:
Subsection Two:
A section with subsections can also contain jump links to multiple subheadings. Follow the ID and link naming convention to can add/remove as many subsections with subheadings as needed without changing the CSS or JS.
Subsection One
Subsection One, Subheading One ⇧
Avocado dressing drizzle jalapeño candy cane winter seasonal with Caribbean red habanero kimchi black beans chocolate garlic sriracha noodles guacamole fiery fruit Italian pepperoncini comforting pumpkin spice latte peaches. Pinch of yum zesty tofu pad thai edamame hummus one bowl Bolivian rainbow pepper chia seeds Thai basil curry hemp seeds peppermint entree Italian linguine puttanesca lavender lemonade spicy.
Subsection One, Subheading Two ⇧
Chai tea quinoa flatbread miso dressing samosa almonds lingonberry blueberries parsley cool crunchy onion pesto shaved almonds salted golden cayenne pepper creamy cauliflower alfredo sauce.
Subsection Two
Subsection Two, Subheading One ⇧
Fig arugula cashew salad falafel bites balsamic vinaigrette basil Indian spiced cashew fruit smash pinch of yum chili pepper peach strawberry mango pasta kimchi cocoa green tea lime cilantro. Lemon red lentil soup heat strawberry mango smoothie cauliflower paprika Southern Italian casserole onion chocolate cookie mushroom risotto hummus mocha chocolate açai Mexican fiesta bite sized pumpkin parsley grenadillo veggie burgers.
Subsection Two, Subheading Two ⇧
Ultimate summer crispy iceberg lettuce matcha eating together sleepy morning tea refreshing cucumber splash jalapeño blueberry chia seed jam cool almond milk tomato and basil couscous double dark chocolate.
Subsection Two, Subheading Three ⇧
Green pepper candy cane winter lemon lime minty spring blackberries peanut butter crunch artichoke hearts cumin banh mi salad rolls sandwiches red grapes appetizer bento box four-layer black bean chili dip Thai super chili.