Mixing
On button click, effect multiple elements on page.
0
I'm quite lost here so any help appreciated!
I'm looking for when a button (3 buttons in total) is clicked that it affects multiple elements: 1. it highlights 3 boxes. 2. It shows an area of text.
I have learned multiple id's dont work, think CSS could work with jquery (not overly familiar with jquery.
// Code for the 3 buttons: //
<div class="row">
<div class="col-sm-2 col-xs-4 col-sm-offset-3 center">
<p><a href="#snav-content1 #snav-content2 #snav-content6 #snav-content10" class="button button-light button-border button-rounded uppercase nomargin active" data-toggle="tab"><?php the_field('button_1'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content5 #snav-content7 #snav-content8 #snav-content11" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_2'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content3 #snav-content4 #snav-content5 #snav-content12" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_3'); ?></a></p>
</div>
</div>
// Code for box areas (on click some will highlight): //
<div class="panel-heading">
<h2><?php the_field('decision_moments_section_title'); ?></h2>
<ul class="nav nav-tabs-v2">
<li class="active col-sm-1-8 col-xs-3 find-mnt">
<a id="snav-content1" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Find.png" alt="Find">
<h4>Find</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 join-mnt">
<a id="snav-content2" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Join.png" alt="Join">
<h4>Join</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 consume-mnt">
<a id="snav-content3" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Consume.png" alt="Consume">
<h4>Consume</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 upgrade-mnt">
<a id="snav-content4" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Upgrade.png" alt="Upgrade">
<h4>Upgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 downgrade-mnt" class="mnt-hover">
<a id="snav-content5 snav-content3" data-toggle="tab">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Downgrade.png" alt="Downgrade">
<h4>Downgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 bill-mnt">
<a id="snav-content6" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Bill.png" alt="Bill">
<h4>Bill</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 leave-mnt">
<a id="snav-content7" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Leave.png" alt="Winback">
<h4>Leave</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 winback-mnt">
<a id="snav-content8" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Winback.png" alt="Winback">
<h4>Winback</h4>
</a>
</li>
</ul>
</div>
// Code for text area that will show on click: //
<div class="tab-content">
<div class="tab-pane fade in active" id="snav-content10">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_1'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content11">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_2'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content12">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_3'); ?>
</div>
</div>
</div>
</div>
this code is taken from elsewhere on the site where the boxes were the areas that were clicked and only affected the text area.
sfsaf
sdf
button href
asked Jan 2 at 23:26
DeclanDeclan
31
add a comment |
0
I'm quite lost here so any help appreciated!
I'm looking for when a button (3 buttons in total) is clicked that it affects multiple elements: 1. it highlights 3 boxes. 2. It shows an area of text.
I have learned multiple id's dont work, think CSS could work with jquery (not overly familiar with jquery.
// Code for the 3 buttons: //
<div class="row">
<div class="col-sm-2 col-xs-4 col-sm-offset-3 center">
<p><a href="#snav-content1 #snav-content2 #snav-content6 #snav-content10" class="button button-light button-border button-rounded uppercase nomargin active" data-toggle="tab"><?php the_field('button_1'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content5 #snav-content7 #snav-content8 #snav-content11" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_2'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content3 #snav-content4 #snav-content5 #snav-content12" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_3'); ?></a></p>
</div>
</div>
// Code for box areas (on click some will highlight): //
<div class="panel-heading">
<h2><?php the_field('decision_moments_section_title'); ?></h2>
<ul class="nav nav-tabs-v2">
<li class="active col-sm-1-8 col-xs-3 find-mnt">
<a id="snav-content1" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Find.png" alt="Find">
<h4>Find</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 join-mnt">
<a id="snav-content2" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Join.png" alt="Join">
<h4>Join</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 consume-mnt">
<a id="snav-content3" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Consume.png" alt="Consume">
<h4>Consume</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 upgrade-mnt">
<a id="snav-content4" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Upgrade.png" alt="Upgrade">
<h4>Upgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 downgrade-mnt" class="mnt-hover">
<a id="snav-content5 snav-content3" data-toggle="tab">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Downgrade.png" alt="Downgrade">
<h4>Downgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 bill-mnt">
<a id="snav-content6" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Bill.png" alt="Bill">
<h4>Bill</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 leave-mnt">
<a id="snav-content7" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Leave.png" alt="Winback">
<h4>Leave</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 winback-mnt">
<a id="snav-content8" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Winback.png" alt="Winback">
<h4>Winback</h4>
</a>
</li>
</ul>
</div>
// Code for text area that will show on click: //
<div class="tab-content">
<div class="tab-pane fade in active" id="snav-content10">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_1'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content11">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_2'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content12">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_3'); ?>
</div>
</div>
</div>
</div>
this code is taken from elsewhere on the site where the boxes were the areas that were clicked and only affected the text area.
sfsaf
sdf
button href
asked Jan 2 at 23:26
DeclanDeclan
31
add a comment |
0
0
0
I'm quite lost here so any help appreciated!
I'm looking for when a button (3 buttons in total) is clicked that it affects multiple elements: 1. it highlights 3 boxes. 2. It shows an area of text.
I have learned multiple id's dont work, think CSS could work with jquery (not overly familiar with jquery.
// Code for the 3 buttons: //
<div class="row">
<div class="col-sm-2 col-xs-4 col-sm-offset-3 center">
<p><a href="#snav-content1 #snav-content2 #snav-content6 #snav-content10" class="button button-light button-border button-rounded uppercase nomargin active" data-toggle="tab"><?php the_field('button_1'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content5 #snav-content7 #snav-content8 #snav-content11" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_2'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content3 #snav-content4 #snav-content5 #snav-content12" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_3'); ?></a></p>
</div>
</div>
// Code for box areas (on click some will highlight): //
<div class="panel-heading">
<h2><?php the_field('decision_moments_section_title'); ?></h2>
<ul class="nav nav-tabs-v2">
<li class="active col-sm-1-8 col-xs-3 find-mnt">
<a id="snav-content1" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Find.png" alt="Find">
<h4>Find</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 join-mnt">
<a id="snav-content2" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Join.png" alt="Join">
<h4>Join</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 consume-mnt">
<a id="snav-content3" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Consume.png" alt="Consume">
<h4>Consume</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 upgrade-mnt">
<a id="snav-content4" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Upgrade.png" alt="Upgrade">
<h4>Upgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 downgrade-mnt" class="mnt-hover">
<a id="snav-content5 snav-content3" data-toggle="tab">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Downgrade.png" alt="Downgrade">
<h4>Downgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 bill-mnt">
<a id="snav-content6" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Bill.png" alt="Bill">
<h4>Bill</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 leave-mnt">
<a id="snav-content7" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Leave.png" alt="Winback">
<h4>Leave</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 winback-mnt">
<a id="snav-content8" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Winback.png" alt="Winback">
<h4>Winback</h4>
</a>
</li>
</ul>
</div>
// Code for text area that will show on click: //
<div class="tab-content">
<div class="tab-pane fade in active" id="snav-content10">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_1'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content11">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_2'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content12">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_3'); ?>
</div>
</div>
</div>
</div>
this code is taken from elsewhere on the site where the boxes were the areas that were clicked and only affected the text area.
sfsaf
sdf
button href
asked Jan 2 at 23:26
DeclanDeclan
31
I'm quite lost here so any help appreciated!
I'm looking for when a button (3 buttons in total) is clicked that it affects multiple elements: 1. it highlights 3 boxes. 2. It shows an area of text.
I have learned multiple id's dont work, think CSS could work with jquery (not overly familiar with jquery.
// Code for the 3 buttons: //
<div class="row">
<div class="col-sm-2 col-xs-4 col-sm-offset-3 center">
<p><a href="#snav-content1 #snav-content2 #snav-content6 #snav-content10" class="button button-light button-border button-rounded uppercase nomargin active" data-toggle="tab"><?php the_field('button_1'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content5 #snav-content7 #snav-content8 #snav-content11" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_2'); ?></a></p>
</div>
<div class="col-sm-2 col-xs-4 center">
<p><a href="#snav-content3 #snav-content4 #snav-content5 #snav-content12" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_3'); ?></a></p>
</div>
</div>
// Code for box areas (on click some will highlight): //
<div class="panel-heading">
<h2><?php the_field('decision_moments_section_title'); ?></h2>
<ul class="nav nav-tabs-v2">
<li class="active col-sm-1-8 col-xs-3 find-mnt">
<a id="snav-content1" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Find.png" alt="Find">
<h4>Find</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 join-mnt">
<a id="snav-content2" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Join.png" alt="Join">
<h4>Join</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 consume-mnt">
<a id="snav-content3" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Consume.png" alt="Consume">
<h4>Consume</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 upgrade-mnt">
<a id="snav-content4" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Upgrade.png" alt="Upgrade">
<h4>Upgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 downgrade-mnt" class="mnt-hover">
<a id="snav-content5 snav-content3" data-toggle="tab">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Downgrade.png" alt="Downgrade">
<h4>Downgrade</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 bill-mnt">
<a id="snav-content6" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Bill.png" alt="Bill">
<h4>Bill</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 leave-mnt">
<a id="snav-content7" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Leave.png" alt="Winback">
<h4>Leave</h4>
</a>
</li>
<li class="col-sm-1-8 col-xs-3 winback-mnt">
<a id="snav-content8" data-toggle="tab" class="mnt-hover">
<img class="moment-logo" src="/wp-content/uploads/2018/01/Winback.png" alt="Winback">
<h4>Winback</h4>
</a>
</li>
</ul>
</div>
// Code for text area that will show on click: //
<div class="tab-content">
<div class="tab-pane fade in active" id="snav-content10">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_1'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content11">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_2'); ?>
</div>
</div>
</div>
<div class="tab-pane fade" id="snav-content12">
<div class="row">
<div class="col-sm-12">
<?php the_field('section_3'); ?>
</div>
</div>
</div>
</div>
this code is taken from elsewhere on the site where the boxes were the areas that were clicked and only affected the text area.
sfsaf
sdf
button href
button href
asked Jan 2 at 23:26
DeclanDeclan
31
asked Jan 2 at 23:26
DeclanDeclan
31
asked Jan 2 at 23:26
DeclanDeclan
31
asked Jan 2 at 23:26
DeclanDeclan
31
asked Jan 2 at 23:26
DeclanDeclan
31
31
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
the css with jquery approach would work fine. if you want to select multiple elements you can use a class selector. here is an example clicking the button highlights three boxes and hides / show a text area.
here is the fiddle
https://jsfiddle.net/2e73h9jp/
// find elements
var banner = $(".banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.toggleClass("alt")
$('textarea').toggleClass("hide");
})
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
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%2f54014505%2fon-button-click-effect-multiple-elements-on-page%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
0
the css with jquery approach would work fine. if you want to select multiple elements you can use a class selector. here is an example clicking the button highlights three boxes and hides / show a text area.
here is the fiddle
https://jsfiddle.net/2e73h9jp/
// find elements
var banner = $(".banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.toggleClass("alt")
$('textarea').toggleClass("hide");
})
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
add a comment |
0
the css with jquery approach would work fine. if you want to select multiple elements you can use a class selector. here is an example clicking the button highlights three boxes and hides / show a text area.
here is the fiddle
https://jsfiddle.net/2e73h9jp/
// find elements
var banner = $(".banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.toggleClass("alt")
$('textarea').toggleClass("hide");
})
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
add a comment |
0
0
0
the css with jquery approach would work fine. if you want to select multiple elements you can use a class selector. here is an example clicking the button highlights three boxes and hides / show a text area.
here is the fiddle
https://jsfiddle.net/2e73h9jp/
// find elements
var banner = $(".banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.toggleClass("alt")
$('textarea').toggleClass("hide");
})
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
the css with jquery approach would work fine. if you want to select multiple elements you can use a class selector. here is an example clicking the button highlights three boxes and hides / show a text area.
here is the fiddle
https://jsfiddle.net/2e73h9jp/
// find elements
var banner = $(".banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
banner.toggleClass("alt")
$('textarea').toggleClass("hide");
})
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
answered Jan 2 at 23:47
Bryan DellingerBryan Dellinger
2,58131739
2,58131739
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%2f54014505%2fon-button-click-effect-multiple-elements-on-page%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
