Mixing
multi tab menu in a page using jquery
0
I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.
what do I need to fix the jquery ?
please help...
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
}) ul.tabs li{ padding:3px; display:inline-block }
ul.tabs li.current{ background: #ededed; color: #222; }
.tab-content{ display: none; }
.tab-content.current{ display: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
<br><br>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>jquery
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
add a comment |
0
I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.
what do I need to fix the jquery ?
please help...
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
}) ul.tabs li{ padding:3px; display:inline-block }
ul.tabs li.current{ background: #ededed; color: #222; }
.tab-content{ display: none; }
.tab-content.current{ display: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
<br><br>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>jquery
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
What is it about your provided code that isn't working correctly? What are your expected results?
– Ryan Wilson
Nov 21 '18 at 14:30
add a comment |
0
0
0
I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.
what do I need to fix the jquery ?
please help...
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
}) ul.tabs li{ padding:3px; display:inline-block }
ul.tabs li.current{ background: #ededed; color: #222; }
.tab-content{ display: none; }
.tab-content.current{ display: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
<br><br>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>jquery
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
I have a tab-menu and trying to use this tab-menu 2 times or more in a page.
But the tab-menu is not working well when multi use.
what do I need to fix the jquery ?
please help...
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
}) ul.tabs li{ padding:3px; display:inline-block }
ul.tabs li.current{ background: #ededed; color: #222; }
.tab-content{ display: none; }
.tab-content.current{ display: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
<br><br>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div> $(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
}) ul.tabs li{ padding:3px; display:inline-block }
ul.tabs li.current{ background: #ededed; color: #222; }
.tab-content{ display: none; }
.tab-content.current{ display: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
<br><br>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div> $(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
}) ul.tabs li{ padding:3px; display:inline-block }
ul.tabs li.current{ background: #ededed; color: #222; }
.tab-content{ display: none; }
.tab-content.current{ display: inherit; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
<br><br>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>jquery
jquery
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
asked Nov 21 '18 at 14:29
user1833620user1833620
176117
176117
What is it about your provided code that isn't working correctly? What are your expected results?
– Ryan Wilson
Nov 21 '18 at 14:30
add a comment |
What is it about your provided code that isn't working correctly? What are your expected results?
– Ryan Wilson
Nov 21 '18 at 14:30
What is it about your provided code that isn't working correctly? What are your expected results?
– Ryan Wilson
Nov 21 '18 at 14:30
What is it about your provided code that isn't working correctly? What are your expected results?
– Ryan Wilson
Nov 21 '18 at 14:30
add a comment |
1 Answer
1
active
oldest
votes
1
The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.
There is one way to solve it by recognizing the parent before showing or hiding tab content:
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
var parent = $(this).closest('div');
$(parent).find('li').removeClass('current');
$(parent).find('.tab-content').removeClass('current');
$(this).addClass('current');
$(parent).find("#"+tab_id).addClass('current');
})
})ul.tabs li {
padding: 3px;
display: inline-block;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
</div>
<br><br>
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>
</div>Explanation
I added a div wrapper on each tab section. This div will be the guide for the code to act.
Once you click in a tab:
- it locates the closest parent that is a
divand uses it as starting point - it uses the show/hide logic only inside this div, not affecting other tabs on the page
answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414294%2fmulti-tab-menu-in-a-page-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.
There is one way to solve it by recognizing the parent before showing or hiding tab content:
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
var parent = $(this).closest('div');
$(parent).find('li').removeClass('current');
$(parent).find('.tab-content').removeClass('current');
$(this).addClass('current');
$(parent).find("#"+tab_id).addClass('current');
})
})ul.tabs li {
padding: 3px;
display: inline-block;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
</div>
<br><br>
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>
</div>Explanation
I added a div wrapper on each tab section. This div will be the guide for the code to act.
Once you click in a tab:
- it locates the closest parent that is a
divand uses it as starting point - it uses the show/hide logic only inside this div, not affecting other tabs on the page
answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
add a comment |
1
The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.
There is one way to solve it by recognizing the parent before showing or hiding tab content:
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
var parent = $(this).closest('div');
$(parent).find('li').removeClass('current');
$(parent).find('.tab-content').removeClass('current');
$(this).addClass('current');
$(parent).find("#"+tab_id).addClass('current');
})
})ul.tabs li {
padding: 3px;
display: inline-block;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
</div>
<br><br>
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>
</div>Explanation
I added a div wrapper on each tab section. This div will be the guide for the code to act.
Once you click in a tab:
- it locates the closest parent that is a
divand uses it as starting point - it uses the show/hide logic only inside this div, not affecting other tabs on the page
answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
add a comment |
1
1
1
The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.
There is one way to solve it by recognizing the parent before showing or hiding tab content:
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
var parent = $(this).closest('div');
$(parent).find('li').removeClass('current');
$(parent).find('.tab-content').removeClass('current');
$(this).addClass('current');
$(parent).find("#"+tab_id).addClass('current');
})
})ul.tabs li {
padding: 3px;
display: inline-block;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
</div>
<br><br>
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>
</div>Explanation
I added a div wrapper on each tab section. This div will be the guide for the code to act.
Once you click in a tab:
- it locates the closest parent that is a
divand uses it as starting point - it uses the show/hide logic only inside this div, not affecting other tabs on the page
answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
The way you are using it is supposed to be one tab only because the code you shared hide all other tabs on the page when one tab is selected.
There is one way to solve it by recognizing the parent before showing or hiding tab content:
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
var parent = $(this).closest('div');
$(parent).find('li').removeClass('current');
$(parent).find('.tab-content').removeClass('current');
$(this).addClass('current');
$(parent).find("#"+tab_id).addClass('current');
})
})ul.tabs li {
padding: 3px;
display: inline-block;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
</div>
<br><br>
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>
</div>Explanation
I added a div wrapper on each tab section. This div will be the guide for the code to act.
Once you click in a tab:
- it locates the closest parent that is a
divand uses it as starting point - it uses the show/hide logic only inside this div, not affecting other tabs on the page
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
var parent = $(this).closest('div');
$(parent).find('li').removeClass('current');
$(parent).find('.tab-content').removeClass('current');
$(this).addClass('current');
$(parent).find("#"+tab_id).addClass('current');
})
})ul.tabs li {
padding: 3px;
display: inline-block;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
</div>
<br><br>
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>
</div>$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
var parent = $(this).closest('div');
$(parent).find('li').removeClass('current');
$(parent).find('.tab-content').removeClass('current');
$(this).addClass('current');
$(parent).find("#"+tab_id).addClass('current');
})
})ul.tabs li {
padding: 3px;
display: inline-block;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
</ul>
<div id="tab-1" class="tab-content current"> 1111 </div>
<div id="tab-2" class="tab-content"> 2222</div>
</div>
<br><br>
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="tab-3">Tab One</li>
<li class="tab-link" data-tab="tab-4">Tab Two</li>
</ul>
<div id="tab-3" class="tab-content current">33</div>
<div id="tab-4" class="tab-content">4</div>
</div>
</div>answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
answered Nov 21 '18 at 14:56
Gabriel SiedlerGabriel Siedler
15427
15427
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414294%2fmulti-tab-menu-in-a-page-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is it about your provided code that isn't working correctly? What are your expected results?
– Ryan Wilson
Nov 21 '18 at 14:30