We Keep Coding

Show/hide multiple fields based on drop down selection

I am using SharePoint Calendar and we are using multiple columns and it is 25 columns, in each time when we want to add new record, we have to skip a lot of columns. So using a dropdown list by showing or hiding multiple columns based on my selection would be a good idea.
What I did after discovering below code, I create a dropdown named Selection and applied the script code below but however it does not work based on my selection. I will be grateful if you guys could help me on this issue.
Thank you
<script src="/SiteAssets/jquery-3.3.1.js"></script>
<script src="/SiteAssets/sputility.js "></script>
<script>
$(document).change(function() {
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Country') {
SPUtility.ShowSPField('Country');
SPUtility.ShowSPField('Colour');
SPUtility.HideSPField('Animal');
SPUtility.HideSPField('Fruit');
}
if (ddlValue == 'Fruit') {
SPUtility.ShowSPField('Fruit');
SPUtility.ShowSPField('Colour');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Animal');
}
if (ddlValue == 'Animal') {
SPUtility.ShowSPField('Animal');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
SPUtility.HideSPField('Colour');
}
if (ddlValue == 'Colour') {
SPUtility.ShowSPField('Colour');
SPUtility.ShowSPField('Animal');
SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
}
});
</script>

First thing you need to do is create a change() function linked to your dropdown so that the function triggers every time you change the values. You can do that by doing this:
$("your selector for your dropdownfield").change(function() {
//your actions here
});
The next thing you need to do is get the value of the dropdown field then perform the hiding of the fields based from its value. To do that, you need to do the following:
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Test Value 1') {
//hide fields for 'Test Value 1'
}
So if we combine the two together you will end up with:
$("your selector for your dropdownfield").change(function() {
var ddlValue = SPUtility.GetSPField('Selection').GetValue();
if (ddlValue == 'Test Value 1') {
//hide fields for 'Test Value 1'
}
});
You can just add more if conditions within the change() function and you should now be able to hide/show fields based on the value of the dropdown.
Let me know if it works!

Output input selection as text to element

I'm a UI Designer working on a multi-page Q&A form, I'm a beginner with jQuery mostly mashing snippets together.
Here's the code: http://codepen.io/covanant/pen/GJZYLq
This part of the form is basically multiple accordions wrapped into tabs, I have most of it working as required but one of the things I need to do, is that whenever I a choice or option, I want to be able to output that option to an element as text right underneath the question.
The element is:
<span class="selected-answer"></span>
You can see it displayed in the first question in the demo, the way that I'd like it to work is that whenever I click the Close All button, it will fadeIn the .selected-answer element and when I click Open All, it will fadeOut the .selected-answer element.
The buttons:
Open All
Close All
jQuery:
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});

First, it doesn't make sense to give each of your select options the same value attribute. By convention, these should be distinct. If you aren't using the value attribute, you can remove it altogether. Otherwise, you should change it to something like:
<select>
<option value="None Selected">None Selected</option>
<option value="Photocell On">Photocell On</option>
<option value="Off Control Only">Off Control Only</option>
<option value="Photocell On / Off Control Only">Photocell On / Off Control Only</option>
</select>
Once that is sorted out, you need to go up the DOM hierarchy and find the right span element to change.
$('select').on('change', function() {
var span = $(this).closest('div.panel').find('span.selected-answer');
span.text($(this).val());
});
For the checkbox questions, you I would do something like this:
HTML:
<span class="selected-answer">
<ul class="checked-options">
<li data-check="checkbox1">nWifi (nLight)</li>
<li data-check="checkbox2">nLightFixtures</li>
<li data-check="checkbox3">xCella (LC&D)</li>
<li data-check="checkbox4">Daylight Harvesting</li>
<li data-check="checkbox5">xPoint (LC&D)</li>
<li data-check="checkbox6">nWifi (nLight)</li>
</ul>
</span>
CSS:
.checked-options li {
display: none;
}
jQuery:
$('input[type="checkbox"]').on('change', function() {
var checkbox = $(this);
var id = checkbox.attr('id');
if ($(this).prop('checked'))
$('li[data-check="' + id + '"]').show();
else
$('li[data-check="' + id + '"]').hide();
});
As for the fading, this should do the trick:
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
$('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
$('.selected-answer').fadeOut();// <-- Fade out
});
Also, depending on whether you want all the questions open or closed by default when the form first loads, you may need to hide all the .selected-answer elements on page load.
Here's the updated codepen.

I agree with VCode on using distinct values for each option in the select elements. But instead of using the value you provide for each option, I think you should use the actual label, that way you can have a more description label, than the option value.
I modified a few of your existing functions to actually populate the selected answer. First I noticed that you already have a function for handling changes to your select - in there I added a small snippet to get the selected answer and pass it to nextQuestion.
$(".panel-body select").change(function() {
var selectElem = $(this);
var answer = selectElem.find("option:selected").text();
nextQuestion(selectElem, answer);
});
Then you also have input elements. Here is your modified input change function:
$(".panel-body input").change(function() {
var inputElem = $(this);
var inputType = inputElem.attr('type');
// common parent for input
var commonParent = inputElem.closest(".panel-body");
var answers = commonParent
.find("input:checked")
.closest("."+inputType)
.find("label")
.map(function(){return this.innerText;})
.get()
.join(", ");
nextQuestion(inputElem, answers);
});
And now as you may have noticed, I added a parameter to the nextQuestion function. I put this code in nextQuestion because you were already accessing the parent there so I wanted to re-use that logic to populate the selected answer.
function nextQuestion(currentQuestion,selectedAnswer) {
var parentEle = currentQuestion.parents(".panel");
if (arguments.length>1) {
parentEle.find('.selected-answer').text(selectedAnswer);
}
if (parentEle.next()) {
parentEle.find(".fa-question").addClass("fa-check check-mark").removeClass("question-mark fa-question").text("");
}
}
Just like VCode mentioned, you can do the fading of the answers using fadeIn/fadeOut
// Open All & Close All buttons
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
$('.selected-answer').fadeIn();// <-- Fade in
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
$('.selected-answer').fadeOut();// <-- Fade out
});
// hide all .selected-answers
$('.selected-answer').hide();
Here is a link to your codepen with my modifications: http://codepen.io/anon/pen/ZGpXXK

Setting a variable using the value of multiple selects, each time any of the selects is changed

I have a list of items that I'm trying to "filter" with a set of 4 selects by matching the value of the select options to the classes I have applied to the list items. Right now, I have it working so that each time you choose a new option with any of the 4 selects, the entire list is reset, and only those items with a class that matches the value of the option you just selected is visible. I would like to have it work so that each time a new option is selected from any of the 4 selects, I could filter by the values of all 4 selects, not just the one that was just changed.
Here's what I have right now - any help is appreciated!
$(".sort-options select").change(function() {
var topics = $(this).val();
$(".list-schools li").hide().filter("." + topics).show();
});

$(".sort-options select").change(function() {
var topics = '';
$(".sort-options select").each(function() {
if ($(this).val()) { // Create combined class .opt1.opt2.opt3
topics += "."+$(this).val();
}
});
$(".list-schools li").each(function() {
$(this).toggle($(this).is(topics));
});
});

Select hidden elements and manipulate them with jQuery

Within a div wrapper with a class of "section", I have dozens of HTML elements repeated across the page that look like this:
<div class="section">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
And each contains certain information inside. Now, what I'm trying to do is once the page loads, show only the first 5, hide the rest in a new div inserted with jQuery, and when this new div is clicked it will display the next five , and then the next five on click again, and so on until the end. The idea is that this new div will function as a button that will always be positioned at the end of the page and will respond to these orders I just mentioned. So far I've got this down:
$('.section').each(function () {
var $this = $(this),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles').appendTo(this).append($allArticles.slice(5));
$('.hidden-articles .article').hide();
}
});
And that hides all but the first five. But now for the rest of the process, I can't get it to work. I don't seem to be able to select properly those hidden div with class "article" and manipulate them to function the way I described above. I would appreciate it a lot if someone more experienced with jQuery could guide me in the right direction and maybe offer a snippet. Many thanks in advance!

You can use the :hidden and :lt selectors to get the functionality you are looking for..
$('.section').each(function() {
var $this = $(this),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles')
.appendTo(this).append($allArticles.slice(5));
$this.find('.hidden-articles .article').hide();
}
});
$('#show').on('click',function() {
var $hidden = $('.hidden-articles .article:hidden:lt(5)');
$hidden.show();
});​
UPDATE
// If one one element to search
var elem = '.section' ;
hideArticles(elem);
// If Multiple Elements on the page...
$('.section').each(function() {
hideArticles(this);
});
$('#show').on('click', function() {
var $hidden = $('.hidden-articles .article:hidden:lt(5)');
$hidden.show();
});
function hideArticles(elem) {
var $this = $(elem),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles')
.appendTo(this).append($allArticles.slice(5));
$this.find('.hidden-articles .article').hide();
}
}​
Check Fiddle

Jquery Selectors for name prefixes in division

In my HTML code I have buttons 1, 2, 3 and 4 for 4 different views. I have some divs named as:
sheet(button id)+some string
So whenever I click on button 2 suppose, I want all the divisions with id=sheet2abc, id=sheet2xyz, etc to become visible and for the rest (i.e. 1, 3 and 4) the dispaly:none property should be set like for sheet1abc, sheet3abc, etc.
How can I do this via jQuery selectors?

KISS. Essentially:
$('[id^=sheet]').hide();
$('[id^=sheet'+num+']').show(); // num is a relevant value, see the example
Working example: http://jsfiddle.net/j4TzA/

I think you want to use wildcards in jQuery selectors.
This shows every div whose id starts with "sheet1":
$('div[id^=sheet1]').each(function() {
$(this).show();
});
And this hides the others:
$('div[id^=sheet]:not([id^=sheet1])').each(function() {
$(this).hide();
});
I created a fiddle to demonstrate that.

Buttons: button 1 and so on
Sheets: <div id="sheet1" class="sheet">sheet 1</div> and so on
jQuery:
$('.button').click(function(event){
event.preventDefault();
$('.sheet').hide();
$('#sheet'+$(this).attr('href')).show();
}
Next time make your question more clear.

You can filter like:
$('button').click(function() {
var $button = $(this);
$('div[id^=sheet]').each(function() {
if((new RegExp("^sheet" + $button.data('id') + ".*$")).test($(this).attr('id'))) {
$(this).show();
} else {
$(this).hide();
}
});
});
Then code buttons like:
<button data-id="1">1</button>