Ronnico Posted June 7, 2017 Share Posted June 7, 2017 Hello, I’m trying to make a page with multiple tabbed modals. By doing this I use the w3schools tutorial: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_tab. I use pretty much the same code. I added 7 other tabbed modals, all identical to the first one with 3 tabs, but of course with different text . The problem I encounter is that only the first modal opens the right way like in the tutorial. The other modals all open with closed tabs and only show the text once you click it. I tried figuring out how to get all the modals opening with the first tab open, but found myself stuck. Any help would be highly appreciated! Link to comment Share on other sites More sharing options...
Ingolme Posted June 7, 2017 Share Posted June 7, 2017 Each modal has to have its own unique id attribute for this to work. Link to comment Share on other sites More sharing options...
Ronnico Posted June 8, 2017 Author Share Posted June 8, 2017 Thank you for your reply. I gave each modal a unique id. Since the first one in the tutorial had 01, I just went on numbering till 08. The specific text for each modal is in the right place, and they all open just fine. I just want them all to open the same way. With the first tab open so you can see the text underneath ( like it opens in the tutorial, where one immediatly sees the text under London.) My first modal is ok, but the others open with all 3 tabs closed. Probably the script has to be adjusted, and that is something I'm not good at..... If someone can help me out there would be great Link to comment Share on other sites More sharing options...
Ingolme Posted June 8, 2017 Share Posted June 8, 2017 I would need to see your code to figure out what the problem is. Link to comment Share on other sites More sharing options...
Ingolme Posted June 8, 2017 Share Posted June 8, 2017 It looks like the openCity() method takes into account all the tabs in the document rather than the ones inside the modal, you should update the openCity() function to select tabs inside the specified model which you can do by either checking ancestor nodes of the clicked element or passing the ID of the modal as a parameter to the openCity() function. You also need to change this line: document.getElementsByClassName("tablink")[0].click(); You have to call the click() method of the first "tablink" in each modal rather than calling it only on the first one in the whole document. Link to comment Share on other sites More sharing options...
Ronnico Posted June 12, 2017 Author Share Posted June 12, 2017 Thanks for your time and effort, Foxy. Here is what it looks like for the first to modals to keep it short; <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Naamloos document</title> </head> <style> .product {display:none} </style> <body> <!-- Container (Product Section) --> <div class="w3-content w3-container w3-padding-64" > <h3 class="w3-center">THE PRODUCTS</h3> <h5 class="w3-center"><em>Beautiful skin all year long.</em> </h5> <br> <p> <strong>Professional products for....</strong>. Some text...........</p><br> <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) --> <div class="w3-row-padding"> <!-- Modal 1 --> <div class="w3-col m3"> <img onclick="document.getElementById('id01').style.display='block'" src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="width:100%" onClick="onClick(this)" class="w3-hover-opacity" alt="Image 1"></p> </div> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-pink w3-xlarge w3-display-topright">×</span> <img src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body Sugaring Pros')">Pro's</button> </div> <div id="Characteristics" class="w3-container product"> <h2>Modal 1.1</h2> <p>I'm not nosey...</p> </div> <div id="Ingredients" class="w3-container product"> <h2>Modal 1.2</h2> <p>really....</p> </div> <div id="Body Sugaring Pros" class="w3-container product"> <h2>Modal 1.3</h2> <p>can I eat this?</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id01').style.display='none'">Close</button> </div> </div> </div> <!-- Modal 2 --> <div class="w3-col m3"> <img onclick="document.getElementById('id02').style.display='block'" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="width:100%" onClick="onClick(this)" class="w3-hover-opacity" alt="image 2"></p> </div> <div id="id02" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id02').style.display='none'" class="w3-button w3-pink w3-xlarge w3-display-topright">×</span> <img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics2')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients2')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body Sugaring Pros2')">Pro's</button> </div> <div id="Characteristics2" class="w3-container product"> <h2>Modal 2.1</h2> <p>bla bla and bla.....</p> </div> <div id="Ingredients2" class="w3-container product"> <h2>Modal 2.2</h2> <p>did you just say bla bla???</p> </div> <div id="Body Sugaring Pros2" class="w3-container product"> <h2>Modal 2.3</h2> <p>No, I said mooo</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id02').style.display='none'">Close</button> </div> </div> </div> </div> </div> <script> document.getElementsByClassName("tablink")[0].click(); function openProduct(evt, productName) { var i, x, tablinks; x = document.getElementsByClassName("product"); for (i = 0; i < x.length; i++) { x.style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks.classList.remove("w3-light-grey"); } document.getElementById(productName).style.display = "block"; evt.currentTarget.classList.add("w3-light-grey"); } </script> </body> </html> Link to comment Share on other sites More sharing options...
Ronnico Posted June 13, 2017 Author Share Posted June 13, 2017 My apologies, I see I didn’t post correctly. I tried to adjust the script here and there, but I guess it is just not my cup a tea yet.... Does anyone have a solution? Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2017 Share Posted June 13, 2017 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Naamloos document</title> <style> .product {display:none} </style> </head> <body> <!-- Container (Product Section) --> <div class="w3-content w3-container w3-padding-64" > <h3 class="w3-center">THE PRODUCTS</h3> <h5 class="w3-center"><em>Beautiful skin all year long.</em> </h5> <br> <p> <strong>Professional products for....</strong>. Some text...........</p><br> <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) --> <div class="w3-row-padding"> <!-- Modal 1 --> <div class="w3-col m3"> <p><img onclick="document.getElementById('id01').style.display = 'block'" src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="width:100%" class="w3-hover-opacity" alt="Image 1"></p> </div> <div id="id01" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id01').style.display = 'none'" class="w3-button w3-pink w3-xlarge w3-display-topright">×</span> <img src="http://cityhotelsootmarsum.nl/wp-content/uploads/2017/02/koe.png" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body_Sugaring_Pros')">Pro's</button> </div> <div id="Characteristics" class="w3-container product"> <h2>Modal 1.1</h2> <p>I'm not nosey...</p> </div> <div id="Ingredients" class="w3-container product"> <h2>Modal 1.2</h2> <p>really....</p> </div> <div id="Body_Sugaring_Pros" class="w3-container product"> <h2>Modal 1.3</h2> <p>can I eat this?</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id01').style.display = 'none'">Close</button> </div> </div> </div> <!-- Modal 2 --> <div class="w3-col m3"> <p><img onclick="document.getElementById('id02').style.display = 'block'" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="width:100%" class="w3-hover-opacity" alt="image 2"></p> </div> <div id="id02" class="w3-modal"> <div class="w3-modal-content w3-card-4 w3-animate-zoom"> <header class="w3-container w3-center"> <span onclick="document.getElementById('id02').style.display = 'none'" class="w3-button w3-pink w3-xlarge w3-display-topright">×</span> <img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Lakenvelder_kalf.jpg" style="height:400px; width:400px;"> </header> <div class="w3-bar w3-border-bottom w3-pale-red"> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Characteristics2')">Characteristics</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Ingredients2')">Ingredients</button> <button class="tablink w3-bar-item w3-button" onclick="openProduct(event, 'Body_Sugaring_Pros2')">Pro's</button> </div> <div id="Characteristics2" class="w3-container product"> <h2>Modal 2.1</h2> <p>bla bla and bla.....</p> </div> <div id="Ingredients2" class="w3-container product"> <h2>Modal 2.2</h2> <p>did you just say bla bla???</p> </div> <div id="Body_Sugaring_Pros2" class="w3-container product"> <h2>Modal 2.3</h2> <p>No, I said mooo</p><br> </div> <div class="w3-container w3-pink w3-padding"> <button class="w3-btn w3-right w3-white w3-border" onclick="document.getElementById('id02').style.display = 'none'">Close</button> </div> </div> </div> </div> <ol> <li>You cant have two onclick events on the same element</li> <li>An id value cannot have spaces within the value name</li> <li>Every opening element <p> and have a closing element to go with it </p> <li> x = document.getElementsByClassName("product"); makes a list of all specific classnamed elements. To go through each of these elements you use loop to go through each index of the targeted elements from 0 to total classnames found, using for loop</li> </ol> </div> <script> document.getElementsByClassName("tablink")[0].click(); function openProduct(evt, productName) { var i, x, tablinks; x = document.getElementsByClassName("product"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; // #4 } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].classList.remove("w3-light-grey");// #4 } document.getElementById(productName).style.display = "block"; evt.currentTarget.classList.add("w3-light-grey"); } </script> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now