Id and class selectors for buttons - previously working

Question

Good Afternoon to whom ever is listening! Any help or even an insult would be useful. I am having trouble putting together a small profile switch/tab display - however, the switch buttons work correctly when the ids are the same; but i'd like to use the same html but with a different css so they dont clash on the same page.

https://jsfiddle.net/limtu/h8t6cc78/

        <div id="profile2">
    <img height="180px" width="180px" src="http://#/files/theme/nat2.jpg">
    <a href="http://www.fightingfitlondon.co.uk/nat-roberson.html">Nat Roberson</a>
    <input id="main2" type="radio" name="menu" checked>
    <label for="main"></label>
    <input id="mail2" type="radio" name="menu">
    <label for="mail"></label>
    <input id="menu2" type="radio" name="menu">
    <label for="menu"></label>
    <div id="menu-content2">
        <span id="info2">About:<br/><br/>Nat joined All Stars Boxing Gym in London when he was 9 years old. He had his first bout at 11 and boxed competitively for 8 years until he was 19.</span>
        <span id="contacts2">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </span>
        <span id="more2">
            <a href="#/nat-roberson.html">Profile</a>
            <a href="">Timetables</a>
            <a href="">Activities</a>
            <a href="">Speciality</a>
        </span>
    </div> 

ie just adding #profile2 { etc, but it disables the button switches. any help would greatly appreciated! Thank you.

https://jsfiddle.net/limtu/h8t6cc78/embedded/result/

Answer 1

Okay, so the problem you have is that you use id 's everywhere. Instead, you should use only classes if there are going to be more than one profile. This is because you should never have two elements with the same id - that's what classes are for.

However, the problem with using classes is that you can't associate a label with an input field that has no id . So, instead of using labels , you should use ::after pseudo elements. Clicking on pseudo elements will also trigger the parent. By applying a solid background to these pseudo elements and using position:absolute; top:0; left:0; position:absolute; top:0; left:0; , you can cover/hide the radio button but still activate it without it having an id .

To only allow one input[type=radio] within one profile to be selected at once, you should give them all the same name , but different value . You can also now target these individually by their value using input[value=your-value] .

However, if you leave it at that, you will only be able to have one tab selected across all of your profiles. So what you need to do is wrap everything in a form element. This way despite the radio buttons having the same name s and value s in every profile, they won't affect other profiles on the same page because they are associated with different forms .

Frankly, it took a lot of time and work, but here's your fixed profile page: https://jsfiddle.net/ilpo/h8t6cc78/5/ I put in three profiles to demonstrate that it works with multiple profiles. The id 's that each of the forms have are not necessary for this to work. They're just there to demonstrate what id 's could/should be used for. An id is used to id entify a unique element, to distinguish it from other elements.