Develop Reference

Closing spoiler when clicking another spoiler

I have the following problem, I would like to create a few spoilers. This has worked so far, but I would like that if a spoiler is open and one clicks on another, the opened again closes.
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
<div id="spoiler" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Show/hide</button>
<div id="spoiler2" style="display:none">
Content2
</div>

Assign a common class to all spoilers and on click hide the contents of all the spoilers using the class name and simply show only the one you want to show:
I have created a function for this like so:
<script>
function showSpoiler(spoilerId)
{
var spoilers = document.getElementsByClassName('spoilers');
for(var i=0;i<spoilers.length; i++)
{
spoilers[i].style.display = "none";
}
document.getElementById(spoilerId).style.display = "block";
}
</script>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler');">Show/hide</button>
<div id="spoiler" class="spoilers" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler2');">Show/hide</button>
<div id="spoiler2" class="spoilers" style="display:none">
Content2
</div>
spoilers is the common class which needs to be hidden before showing the specific one.
Remember
getElementsByClassName() gives out an array that is why the for loop is in place.

To make it easier for you to start, I'll give you an example made for Event Listener for Radio buttons.
code:
document.getElementById("type_test").addEventListener("click", functio_test);
document.getElementById("type_test1").addEventListener("click", functio_test);
function functio_test(){
var x = document.querySelector('input[name="type_test"]:checked').value;
//var x = document.forms[0].elements.type_test.value;
if(x == "ola"){
alert("Ola José");
document.getElementById('disp_0').style.display = 'block';
document.getElementById('disp_1').style.display = 'none';
}
else if(x == "adeus"){
alert("Adeus José");
document.getElementById('disp_1').style.display = 'block';
document.getElementById('disp_0').style.display = 'none';
}
else {
alert("Continua José");
}
}
<div id="select_0">
<br> <input id = "type_test" type="radio" name="type_test" value="ola"> ola
<input id = "type_test1" type="radio" name="type_test" value="adeus"> adeus <br/> <br><br/>
</div>
<div id="disp_0" style="display:none">
<input type="text" name="lastname" value="ola Jose" ><br><br/>
</div>
<div id="disp_1" style="display:none">
<input type="text" name="lastname1" value="Adeus Jose" ><br><br/>
</div>
I hope the post helps you.

you can use classes to accomplish this (class="spoilers")
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler')"> Show/hide </button>
<div id="spoiler" style="display:none" class="spoilers">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler2')"> Show/hide </button>
<div id="spoiler2" style="display:none" class="spoilers">
Content2
</div>
<script>
function toggleSpoiler(id) {
var spoilers = document.getElementsByClassName("spoilers");
for(var i = 0; i < spoilers.length; i++) {
if (spoilers[i].id != id) {
spoilers[i].style.display = "none";
}
}
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='';
} else {
document.getElementById(id).style.display='none';
}
}
</script>

The way I would do this would be to create two additional classes and add an additional div to use the parent/child association to determine which spoiler (in relation to the button) needs to be displayed.
Starting off with the classes, let's call them
.spoiler
and
.active
The idea is to make the .spoiler class hide and the .active class show, like so:
.spoiler {
display:none;
}
.spoiler.active {
display:block;
}
All spoiler elements would have .spoiler as a class and only the currently active spoiler would have the .active class, now let's create our new div which will bundle the spoilers and their buttons to have a common parent.
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content
</div>
</div>
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content2
</div>
</div>
Now we can use the relative "spoiler-item" class when a button is pressed to determine which spoiler is related to the button being pressed and also remove the "active" class from all other "spoiler" elements to make sure only one spoiler is shown at a time.
I recommend using jQuery for this, due to time constraints I'm not going to be able to do it in pure JS.
$(document).ready(function() {
$('.spoiler-item button').click(function(e) {
if($(this).parent('.spoiler-item').find('.spoiler').hasClass('active')) { // If the item we've selected is already active
$(this).parent('.spoiler-item').find('.spoiler').removeClass('active');
return;
}
$('.spoiler.active').removeClass('active'); // Close all open spoilers
$(this).parent('.spoiler-item').find('.spoiler').addClass('active'); // Open relative spoiler
});
});
See JSFiddle for working answer: https://jsfiddle.net/vvm4xe0m

HTML Page search

I have a very long html file (20K+ lines) and I want to have a search that will find the search term and then scroll to the li class="page" data-name="XX". If more than one instance of the term is found we need a "next" result button.
Here is an excerpt from my HTML file I want to search:
<li class="page" data-name="11">
<div class="pageResizer" style="width:640px;height:960px;"> </div>
<div id="item690" class="pageItem" alt="Rectangle"> </div>
<div id="item728" class="pageItem" alt="Rectangle"> </div><button class="pageItem" alt="Home" id="item1426" data-id="1426" onclick="nav.to(5);"> </button><button class="pageItem" alt="prevBtn" id="item1423" data-id="1423" onclick="nav.back(this);"> </button><button class="pageItem" alt="nextBtn" id="item2550" data-id="2550" onclick="nav.next(this);"> </button><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:491px;top:11px;" data-src="assets/images/item_2757.png"/>
<div id="item2788" class="pageItem singleline" alt="Lafayette Chamber">
<p class="autoParaStyle1">Lafayette Chamber</p>
</div><button class="pageItem" alt="Share" id="item3136" data-id="3136"> </button>
<a href="javascript:nav.to(2);"><button class="pageItem" alt="Help" id="item2977" data-id="2977" onclick="nav.to(2);"> </button>
</a><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:1px;top:66px;" data-src="assets/images/item_4899.jpg"/><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:1px;top:707px;" data-src="assets/images/item_4901.jpg"/>
<div id="item4906" class="pageItem singleline" alt="lafayETTE ">
<p class="autoParaStyle13">lafayETTE<br />
</p>
</div>
<div id="item4937" class="pageItem singleline" alt="HISTORY">
<p class="autoParaStyle14">HISTORY</p>
</div>
<div id="item4982" class="pageItem" alt=" little more than a century ago, the first pioneers trickled into this region after a long journey across the Great P...">
<p class="Article-Body"> <span class="autoCharStyle5">little more than a century ago, the first pioneers trickled into this region after a long journey across the Great Plains. The gold rush attracted more and more adventurous fortune seekers who were closely followed by other settlers. The honeymoon of Lafayette and Mary E. Miller was spent crossing the plains and arriving in the Boulder region. In 1863, they started farming the Burlington (Longmont) area and soon moved south and settled in the present site of Lafayette. Lafayette Miller was an industrious man and besides farming, he operated the stage stop and ran several meat markets. His sudden death in 1878 left Mary Miller with six small children to raise. She did this and more…she raised a town!<br /></span> </p>
<p class="autoParaStyle8"><br /></p>
</div>
<div id="item27143" class="pageItem singleline" alt="A">
<p class="autoParaStyle15">A</p>
</div>
Here is the code I have so far:
<script>
function search() {
var name = document.getElementById("searchForm").elements["searchItem"].value;
var pattern = name.toLowerCase();
var targetId = "";
var divs = document.getElementsByClassName("page");
for (var i = 0; i < divs.length; i++) {
var para = divs[i].getElementsByTagName("p");
var index = para[0].innerText.toLowerCase().indexOf(pattern);
if (index != -1) {
targetId = divs[i].parentNode.id;
document.getElementById(targetId).scrollIntoView();
break;
}
}
}
</script>
<form id="searchForm" action="javascript:search();">
<div class="input-group">
<button id="go" type="button"
onclick="document.getElementById('searchForm').submit(); return false;">
Search</button>
<input type="text" id="searchItem" class="form-control" placeholder="Search" cols="50" rows="2">
</div>
</form>
Not sure what I need to do to my code to make this work and don't have a clue how to make a "next result" button.

I think this is what you are looking for:
HTML:
<body>
<form id="searchForm" action="javascript:search();" class="form">
<button id="nextButton" onclick="nextItem()" type="button" class="make-invisible">NEXT</button>
<div class="input-group">
<button id="go">Search</button>
<input type="text" id="searchItem" name="searchItem" class="form-control" placeholder="Search" cols="50" rows="2">
</div>
</form>
<ul>
<li class="page" data-name="foo">Has data-name = foo</li>
<li class="page" data-name="foo">Has data-name = foo</li>
...
</ul>
</body>
JavaScript:
var selectedItems;
var currentlySelectedItem;
var makeInvisibleClassName = "make-invisible";
var nextButton = document.querySelector("#nextButton");
function search() {
makeInvisible();
var searchPhrase = document.querySelector("#searchItem").value;
selectedItems = document.querySelectorAll(".page[data-name='" + searchPhrase + "']");
if (selectedItems.length === 0) {
return;
}
if (selectedItems.length > 1) {
makeVisible();
}
currentlySelectedItem = 0;
nextItem();
}
function nextItem() {
selectedItems[currentlySelectedItem].scrollIntoView();
currentlySelectedItem++;
if (currentlySelectedItem >= selectedItems.length) {
currentlySelectedItem = 0;
}
}
//////////
function makeInvisible() {
nextButton.classList.add(makeInvisibleClassName);
}
function makeVisible() {
nextButton.classList.remove(makeInvisibleClassName);
}
CSS:
.form {
position: fixed;
left: 0;
top: 0;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#nextButton {
margin-right: 10px;
}
.make-invisible {
display: none;
}
Here is the working Demo
Ok, let me explain what I did here.
When you have a form you don't actually need to this:
<button id="go" type="button" onclick="document.getElementById('searchForm').submit(); return false;">
Instead you can go very simple:
<button id="go">Search</button>
The default button type in a form is type="submit" which automatically triggers the event specified in the action attribute.
The next thing is the NEXT button. I hard-coded it and in order to show it and hide it, I will add or remove class make-invisible. Notice the button is invisible at the beginning. It also has a click event which will trigger nextItem()
<button id="nextButton" onclick="nextItem()" type="button" class="make-invisible">NEXT</button>
I also made 2 global variables: selectedItems, which will store the array of selected items and currentlySelectedItem that has the index of currently scrolled to item.
The search() function gets all elements that has the class name page and has attribute data-name with specified word. Then it checks if there is more then one result. If so, it makes the button visible.
The nextItem() function scrolls into selected element, and raises index by one. If the index value if bigger then there is matching elements, it will start a loop.

Create and add a <li> element to an ordered list using javascript/jquery

I'm trying to create a To Do list, and when the user enters a new task, and clicks the button, the javascript should create a li element containing a span that holds the user's entry, then add that li element to the ol in my HTML.
My HTML looks like this:
<body>
<h1>To Do:</h1>
<section>
<input type="text" id="add_todo">
<span id="add_task_error"> </span>
<input type="button" id="add_task" value="Add task">
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
<div id="tasklist">
<ol class="list">
</ol>
</div>
</section>
</body>
This is the function that is not working:
var newSpan = $('<span>input</span>').addClass("task");
//wrap it in a <li> element
newSpan = (".task").wrap("<li></li>");
$(".list").append(newSpan);
I also tried it this way:
var new_task = $('<li>*</li>').addClass('task');
new_task.appendTo('ol.list');
new_task.setAttribute('id', 'new_task');
$("#new_task").text(input);
Both ways did not work- when I clicked the Add Task button (which is not the problem- I tested it), nothing happened on the screen...
What am I doing wrong???

Try this
$(document).ready(function(){
$('#add_task').click(function(){
var task = $('#add_todo').val();
var html = '<li><span>'+task+'</span></li>';
$('.list').append(html);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>To Do:</h1>
<section>
<input type="text" id="add_todo">
<span id="add_task_error"> </span>
<input type="button" id="add_task" value="Add task">
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
<div id="tasklist">
<ol class="list">
</ol>
</div>
</section>

Create the element, set all the attributes and when, you are done, add it to the ol.
var new_task = $('<li></li>').addClass('task');
new_task.text($("#add_todo").val()); //this is the value of the input
new_task.attr('id', 'new_task'); //use attr instead of setAttribute
new_task.appendTo('ol.list');
FIDDLE

Hope this works for you
JS code:
$("#add_task").click(function(){
var value = $("#add_todo").val();
$(".list").append("<li class='task'><span>"+ value +"</span></li>")
});
Here is the working Plnkr

This should be your code.
Call addLI() on click of your button
<input type="button" id="add_task" value="Add task" onclick="addLI()">
function addLI() {
//check for empty value
if ($('#add_todo').val() == "") {
alert("Please Add Todo.");
return;
}
//generate html for li
var html = "<li class='task' id='new_task'><span>" + $('#add_todo').val() + "</li>";
//append li to order list
$(".list").append(html);
}

Also try to hide the div on which you are showing the message before adding any new task.
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
$('.open').hide(); on click event of add task

How to find div on checkbox change event instead of hardcoding div id in jquery selector?

I want to use jquery function to find all div on checkbox change event instead of hard-coding id and class name in jquery selector.
There are 2 sections in my code with Id name section1 and section2 and so on chkall event i want to find this div id and pass this as jquery selector
This is my code:
HTML:
<div class="header">
<asp:CheckBox ID="chkAll" CssClass="checkallparent" runat="server" Text="Select All" />
</div>
<div class="abc">
<ul class="list">
<div id="section1" class="section">
<li class="carousel-border">
<input type="checkbox" id="chkParent1" class="chkParent" /> --Parent of below 2 checkboxes
</li>
<li>
<input type="checkbox" id="chkchild1" class="chkChild"/>
</li>
<li>
<input type="checkbox" id="chkchild2" class="chkChild"/>
</li>
</div>
<div id="section2" class="section">
<li class="carousel-border">
<input type="checkbox" id="chkParent2" class="chkParent" />--Parent of below 2 checkboxes
</li>
<li>
<input type="checkbox" id="chkchild3" class="chkChild" />
</li>
<li>
<input type="checkbox" id="chkchild4" class="chkChild"/>
</li>
</div>
</ul>
</div>
SCRIPT:
$(".checkallparent").change(function () {
//on this event i want to check all my checkboxes and this is how i am doing.
if ($("#chkAll").prop('checked') == true) {
//for section 1
$(this).find('input:checkbox[id^="chkParent1"]').prop('checked', true)
$(this).closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
$(this).closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);
// Above is not working but when i do like below it is working
$("#section1 .chkParent").find('input:checkbox[id^="chkParent1"]').prop('checked', true)
$("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild1"]').prop('checked', true);
$("#section1 .chkParent").closest('.section').find('input:checkbox[id^="chkchild2"]').prop('checked', true);
//I dont want to hardcode like this instead i would like to use any jquery function
//which would find this 1st div and 2nd(for eg section1 and section2 etc... )
}
});
So can anybody tell me how to do this??

This code should help you figure that out. The first change event sets the parent checkboxes, then triggers off the change event of those parents.
The second change event handle the parent items.
$(".checkallparent").change(function () {
var checked = $(this).is(":checked");
var parentCBs = $("input[type='checkbox'].chkParent");
parentCBs.each(function(i, el) {
el.checked = checked;
$(el).trigger("change");
});
});
$("input[type='checkbox'].chkParent").change(function () {
var checked = $(this).is(":checked");
var div = $(this).closest("div");
var childCBs = div.find("input[type='checkbox'].chkChild");
childCBs.each(function(i, el) {
el.checked = checked;
});
});
Here is a working Fiddle.

Live text search jquery, wrong selector?

So i'm pretty new to this, please bear with me :)
And it's kinda working for me, this is what I have:
HTML:
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" placeholder="Søg efter skole..." />
<span id="filter-count"></span>
</fieldset>
jQuery:
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".ss_voting_manual .ss_voting_entry_list").find("li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Klasser fundet = "+count);
});
});
But when I make a search it do find the li, but it lose most of the style, if you see the screenshot it will make better sense then I can do in writing.
<div id="manual_voting" class="ss_voting_manual">
<ul class="ss_voting_entry_list">
<li class="my_db_entry item_handle_22924874" id="my_db_entry_22924874" style="">
<div class="entry_title entry_details">
<h4>Koge Handelsskole - 3C</h4>
</div>
<div class="entry_photo">
<ol>
<li style="display: list-item;"><img alt="" src=
"https://d2ndy3xguswqvu.cloudfront.net/images/220405/22924874/original_89bf1593506cabda8ec9fd63ac6e35d0.png"></li>
</ol>
</div>
<div class="entry_votes entry_details">
<span class="votes">65</span> Stemmer
</div>
<div class="entry_description entry_details ss_preserve_ws"></div>
<div class="itemActions entry_actions">
<ul>
<li class="item_vote" style="display: inline;"><a class="vote_link vote"
href="#" onclick=
"SST.vote_for(widget_14972805, 22924874, this); return false;">Stem</a></li>
<li class="item_share" style="display: inline;"><a class="share_link" href=
"#" onclick="ss_share(widget_14972805, 22924874); return false;">Del med dine
venner</a></li>
</ul>
</div>
<div class="clear"></div>
</li>
<li class="my_db_entry item_handle_22924821" id="my_db_entry_22924821" style=
"display: list-item;">
<div class="entry_title entry_details">
</div>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
<div class="ss_voting_paging" id="paging_voting"></div>

Wrong Selector
In your target code you are searching for all the li's under .ss_voting_manual .ss_voting_entry_list including grand children.
$(".ss_voting_manual .ss_voting_entry_list").find("li")
This is causing your grandchildren li's, the one's that are wrapping the img tags, to be hidden.
Solution
Change your selector to fetch only direct descendant li's:
$(".ss_voting_manual .ss_voting_entry_list").children("li")
or
$(".ss_voting_manual .ss_voting_entry_list > li")
This will only fetch the first direct set of li's after the ul.