Jump to content

Tabbed modals

Ronnico

By Ronnico
in CSS

 Share

Recommended Posts

Ronnico Newbie

Ronnico

Posted
Posted

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
Ronnico Newbie

Ronnico

Posted
  • Author
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
Ronnico Newbie

Ronnico

Posted
  • Author
Posted

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">&times;</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">&times;</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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!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">&times;</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">&times;</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 &lt;p&gt; and have a closing element to go with it &lt;/p&gt;
                <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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...