Develop Reference

On click event backfiring after adding nested anchor tag to section element

I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});

I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>

You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});

Add bootstrap active class to a button if clicked but will be removed if clicked on another button [duplicate]

I've got a couple of divs to scroll between. I need to set the one in active view (after a link was clicked) to 'active' and all the other div's should have that class removed.
Using toggle I can't get it to work.
$('.projecten').click(function () {
$('#due').toggleClass('selected'),
$paneTarget.stop().scrollTo('#due', 800, {
margin: true,
onAfter: function () {
$("body").animate({
backgroundColor: "#1f8311"
}, 800),projectenfade();
}
}); menuShow(),titleFadeOut();
});
the html
<div id="due" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="otto" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="etc" class="elements">
<h3 class="resizeme">...</h3>
</div>
...
<div id="menu">
<p>
<a class="welkom pointme">Welkom</a> <a class="blog pointme">Blog</a> <a class="media pointme">Media</a> <a class="projecten pointme">Projecten</a> <a class="contact pointme">Contact</a>
</p>
</div>

why not just use addClass and removeClass:
$(".selected").removeClass("selected");
$(this).addClass("selected");
to only remove selected from divs use this for the first line:
$("div.selected").removeClass("selected");

Input from a textbox and add into a list isn't working

I am trying to add a new item into a list from a text box using jQuery but it's not working. There are a lot of code here, I want to find the problem in my code.
HTML code
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul>
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>
</div>
</br>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<input type="submit" id="addButton" value="Add"/>
</form>
And the jQuery code
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('item:textbox');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
var $newText=$('input:textbox').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});

I know this has an accepted answer - and I didn't read your question fully so this may not do exactly what you want - but I wanted to present an alternate approach with less code. The following features a button that when you click it - takes the value from the textbox and appends it to the list (note that I gave the list an ID). Just so you have another option. You don't need tjhe form at all and you certainly don't need to submit it - just to get the value and append it to the list. Just saying.
$(document).ready(function(){
$('#addButton').click(function(){
var newItem = $('#itemDescription').val();
$('#myList').append('<li class="hot">' + newItem + '</li>');
$('#itemDescription').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul id="myList">
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<button type="button" id="addButton">Add</button>

check this fiddle.
you had a small error in your jQuery. Here is the working code:
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('#itemDescription');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
e.preventDefault();
var $newText=$('#itemDescription').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
first you have to prevent the default behaviour from the form element on submit. To do this i added the e.preventDefault(); function. then I received this error:
Uncaught Error: Syntax error, unrecognized expression: unsupported
pseudo: textbox
To fix this, I changed the selector to the ID of the input field. Now it works perfectly fine.

buttons to activate buttons that toggle from one div to another

Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!

Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.

You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>

Show and hide details on click of a divison

I am having divisons show and hide.Now what i want is that on clicking "show" a divison below it show the details and the text of the "show" divison changes to "hide" and on clicking "hide" the details get hidden and text changes to "show".How this can be done .Please help
Here is my html :
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<span id="hide" class="" style="display:none">
<a href="#" class="fill-div" style="width: 100px;">
Hide details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
EDIT :
<tr class="">
<td width="40%" valign="top">
(<%=browser%>)
<span class="show" style="text-decoration: underline">
Show details
</span>
<div class="info" style="display:none; margin-left:2em">
<i>
"<%=useragent%>"
</i>
</div>
</td>
<td valign="top">
India(<%=rs.getString("IP_ADD")%>)
</td>
<td valign="top">
3:16 pm (0 minutes ago)
</td>
</tr>
My JAVASCRIPT :
<script>
$(document).ready(function() {
$(document).ready(function() {
$('.show').click(function() {
$(this).next().toggle();
var visible = $(this).next().is(":visible");
if(visible){
$('a',this).html('Hide details');
}else{
$('a',this).html('Show details');}
});
});
</script>
It does not display the details.Please help

You do not need to span for toggling content. using two span for achiving this will make code more complicated. Try this:
Html
<span id="show" class="" style="text-decoration: underline">
<a href="#" class="fill-div" style="width: 100px;">
Show details
</a>
</span>
<div id="info" style="display:none; margin-left:2em">
<i>
Details shown here
</i>
</div>
Js:
$('#show').click(function() {
$('#info').toggle();
var visible = $('#info').is(":visible");
if(visible)
$('a',this).html('Hide details');
else
$('a',this).html('Show details');
});
Working Demo
update:
Demo for multiple

$("#show a").click(function(e) {
e.preventDefault();
$("#info, #hide").show();
$("#show").hide();
});
$("#hide a").click(function(e) {
e.preventDefault();
$("#info, #hide").hide();
$("#show").show();
});

Use this to show/hide the "Details" div:
http://api.jquery.com/toggle/
Also, you could use just one span to display the "Show/Hide" link, changing the text accordingly when you click to toggle.

A breeze with jQuery. Try my example on jsfiddle.
// Gets executed when document and markup is fully loaded
$(document).ready(function() {
// Bind a click event on the element with id 'toggle'
$('#toggle').click(function() {
// Change text accordingly
if ($('#text').html() == 'Show details') {
$('#text').html('Hide details');
} else {
$('#text').html('Show details');
}
// Show / Hide info bar
$('#info').toggle();
});
});

You can do something like this:
http://jsfiddle.net/Mp8p2/
You don't need nearly as much HTML:
<span class="toggle">Show Details</span>
<div id="info">
Details shown here
</div>
along with just display:none in the css and the following jQuery:
$(".toggle").click(function() {
$('#info').slideToggle();
if($(this).html() == "Show Details") {
$(this).empty().text("Hide Details");
}
else {
$(this).html("Show Details");
}
});