I'm trying to set up something in JQuery but at the moment I'm not really sure I'm doing it right.
To keep it simple, I would like to display 4 checkboxes. These checkboxes serve as filters. For the example, let's say the first checkbox is spring, the second is summer, the third is autumn and the fourth is winter.
When I check the "summer" box I would like some text to be displayed. If I tick the autumn one, another text is displayed. Basically, I would like to display different texts depending on what is ticked.
<script type="text/javascript">
function ShowHideDiv(winter) {
var winter_list = document.getElementById("winter_list");
winter_list.style.display = winter.checked ? "block" : "none";
}
</script>
<script type="text/javascript">
function ShowHideDiv(summer) {
var summer_list = document.getElementById("summer_list");
summer_list.style.display = summer.checked ? "block" : "none";
}
</script>
<label for="checkWinter">
<input type="checkbox" id="winter" onclick="ShowHideDiv(winter)" />
Winter
</label>
<label for="checkSummer">
<input type="checkbox" id="summer" onclick="ShowHideDiv(summer)" />
Summer
</label>
<hr />
<!-- For Winter -->
<div id="winter_list" style="display: none">
<p>Text come here</p>
</div>
<!-- For Summer -->
<div id="summer_list" style="display: none">
<p>Text come here for summer</p>
</div>
If possible: Can we make it possible to tick more than one box?
I've been following tutorials on StackOverflow but so far without much success, as I haven't found anything in the genre of my same request.
Thanks
You have a mistake in thinking of your code.
The function ShowHideDiv()does exists two times and Javascript overload it. Because your passed an undefined object, the browser choose one of them.
My Suggestion:
First step: Replace the function calls in your input fields by <input type="checkbox" id="summer" onclick="ShowHideDiv(this)" />. The parameter this passes the clicked object to target function.
Second step: Merge all of your function "ShowHideDiv" to one:
function ShowHideDiv(checkbox) {
switch (checkbox.id)
{
case "summer":
var summer_list = document.getElementById("summer_list");
summer_list.style.display = summer.checked ? "block" : "none";
break;
case "winter":
var winter_list = document.getElementById("winter_list");
winter_list.style.display = winter.checked ? "block" : "none";
break;
default:
//What ever you want do to
break;
}
}
The argument checkbox.id returns the value from attribute id of passed checkbox.
Switch and case is a smaller form of if() else if() and else().
First, give all your checkboxes an id.
You can then add data-target to the display texts for easy selection. Try this
<label for="winter">
<input type="checkbox" id="winter" onchange="ShowHideDiv(this)" />
Winter
</label>
<label for="summer">
<input type="checkbox" id="summer" onchange="ShowHideDiv(this)" />
Summer
</label>
<hr />
<!-- Display text -->
<div>
<p style="display: none" data-target="#winter">Text come here</p>
<p style="display: none" data-target="#summer">Text come here for summer</p>
</div>
<script type="text/javascript">
function ShowHideDiv(elem) {
var target = document.querySelector('[data-target="#'+elem.id+'"]');
target.style.display = elem.checked ? 'block' : 'none';
}
</script>The simplest, cleanest solution I could think of is this:
const ShowHideDiv = function (check, season) {
let el = document.getElementById(season);
// hide element(s)
el.classList.add('hidden');
// Show element(s) if checked
if(check.checked === true){
el.classList.remove('hidden');
}
}.hidden {
display: none;
}<label for="checkWinter">
<input id="checkWinter" type="checkbox" onchange="ShowHideDiv(this, 'winter')" />
Winter
</label>
<label for="checkSummer">
<input id="checkSummer" type="checkbox" onchange="ShowHideDiv(this, 'summer')" />
Summer
</label>
<label for="checkSpring">
<input id="checkSpring" type="checkbox" onchange="ShowHideDiv(this, 'spring')" />
Spring
</label>
<hr />
<!-- For Winter -->
<div class="hidden" id="winter">
<p>Text come here for winter</p>
</div>
<!-- For Summer -->
<div class="hidden" id="summer">
<p>Text come here for summer</p>
</div>
<!-- For Spring -->
<div class="hidden" id="spring">
<p>Text come here for spring</p>
</div>It works without changes for 2, 3 or 4 seasons.