+ 2

My tabs aren't working, what's going on? (Code in description)

<h1><sup>The</sup> Watchers</p> <div class="tabWrapper"> <input type="radio" id="t0" name="tabview" checked > <label for="t0">Home</label> <input type="radio" id="t1" name="tabview"> <label for="t1">About Us</label> <input type="radio" id="t2" name="tabview"> <label for="t2">Our Objectives</label> <input type="radio" id="t3" name="tabview"> <label for="t3">Join Us</label> <div class="tab"> <h2>Home</h2> <p>Welcome to our page. Prepare to see epicness. Have a look around, if you dare...</p> </div> <div class="tab"> <h2>About Us</h2> <p>Our names are Sloth_3Toes, Kitty_Feline and Dog_Hound.</p> <h3>Sloth_3Toes</h3> <p>Sloth_3Toes is the leader and founder of The Watchers.</p> <p>Sloth_3Toes organises missions, assignments, and members.</p> <h3>Kitty_Feline</h3> <p>Kitty_Feline is one of the first members of The Watchers.</p> <p>Kitty_Feline participates in the missions and assignments and plans out how to do all of it.</p> <h3>Dog_Hound</h3> <p>Dog_Hound is also one of the first members of The Watchers. Dog_Hound participates in the missions and assignments and is one of the most daring of The Watchers.</p> <div class="tab"> <h2>Our Objectives</h2> <p>Our objective at the minute is to make sure everywhere is becoming safer. More objectives will be reported soon.</p> </div> <div class="tab"> <h2>Join Us</h2> <p>To join us, you must be skilled in hacking and you must be very quick on your feet.</p>

25th Jul 2017, 8:13 PM
Robbie Mchale
Robbie Mchale - avatar
2 Answers
+ 10
Hi @Robbie, there are 4 main errors: ■ The first header tag <h1> that wraps "The Watchers" is not closed, you're using a paragraph closing tag, it should be </h1> instead. ■ The div with class "tabs" that wraps the "About Us" section doesn't have a closing div tag, add one like this: </div> ■ The div with class "tabs" that wraps the "Join Us" section is missing a closing div tag too. ■ The div with class "tabWrapper" which wraps all your content is missing a closing div tag as well. Here's your code fixed (I have also reduced 5% the font-size so the tabs fit) https://code.sololearn.com/W3R1k62860sn/?ref=app
26th Jul 2017, 5:27 AM
Pao
Pao - avatar
+ 4
@Robbie Mchale: It would be fair to credit original author of the "pure css tab view" you've forked ;P https://code.sololearn.com/WxWFo7C8KNNV/?ref=app And anyway, have you read at least this tuto explaining how to? ^^ https://code.sololearn.com/WHJcalsIWiiZ/?ref=app (it explain how works/to do Css nested tabs, but mainly first how works/how to do such tabs...)
26th Jul 2017, 5:53 AM
visph
visph - avatar