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");
});

Delete all links and apped a text based on the ID of the clicked link

i need some help with a javascript code. I have three links, each one have an diferent ID, what i want to do is, when i click in one of those links, the script gets the id, and then delete all the three link and put a text in the place, for example:
<div id="main">
<div>
<div id="links">
<a id="choice1" href="#footer" onclick="createDiv();removeLink();">choice1</a>
<a id="choice2" href="#footer" onclick="">choice2</a>
<a id="choice3" href="#footer" onclick="">choice3</a>
</div>
</div>
</div>
When I click choice1, all links have to be deleted and create a text "you clicked in choice1", if I click in choice2 the same happens, but this time shows "you clicked in choice2".
I have this javascript, with function to create a div with the text and a function to remove the links. But I don't know how to do to pick the IDs and place the correspondent text.
function createDiv()
{
var element = document.createElement("div");
var main = document.getElementById("main");
main.appendChild(element);
var text = document.createTextNode("This is the new text");
element.appendChild(text);
}
function removeLink()
{
var link = document.getElementById("links");
link.parentNode.removeChild(link);
}
I've searched a lot in the internet but I didn't find an effective way to do it. If someone can give a tip how to do that, I'll be very thankful.

You can set a click listener on the parent container, which is #links and check to see if you click on one of it's link and if you did, get the InnerHTML and replace the innerHTML of your #links div.
document.getElementById('links').addEventListener('click',function(event){
event.preventDefault();
var target = event.target;
if (target.nodeName === 'A'){
this.innerHTML = 'You clicked on ' + target.innerHTML;
}
});
<div id="links">
<a id="id-1" href="google.com">Option 1</a>
<a id="id-2" href="google.com">Option 2</a>
<a id="id-3" href="google.com">Option 3</a>
</div>

You should use event listenners like in this answer because they are a better practice in general. But, if you still want/need to use onclick, then you can use this and pass it to createDiv. so your code will look like this :
function createDiv(e)
{
var element = document.createElement("div");
var main = document.getElementById("main");
main.appendChild(element);
var text = document.createTextNode("you clicked on " + e.innerText);
element.appendChild(text);
}
function removeLink()
{
var link = document.getElementById("links");
link.parentNode.removeChild(link);
}
<div id="main">
<div>
<div id="links">
<a id="choice1" href="#footer" onclick="createDiv(this);removeLink();">choice1</a>
<a id="choice2" href="#footer" onclick="createDiv(this);removeLink();">choice2</a>
<a id="choice3" href="#footer" onclick="createDiv(this);removeLink();">choice3</a>
</div>
</div>
</div>
All the on* events pass as an argument the element to which the event occured.

2 divs should open 2 different divs

sorry for the title, I don't know how I should have said it better (my brain is currently melting because of this problem I can't solve).
Here's a description of my problem:
At first I have one div with a list of names in it:
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
When I click on a name in this div, a second div box (#objekt2) pops up, with more information about the person I clicked on. In this div box there may be a link to even more details, if you click this #objekt3 (new div box) should pop up.
If I already clicked on the link in #objekt1 and click it again, there shouldn't be any more div added, same goes for #objekt2.
Now I've tried it using jQuery, sadly it doesn't work the way it should. If I click the link in #Objekt1 2 times, 2 divs will be added. If I click the link in #Objekt2 no div is added.
Here's my jQuery code for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
function checkDiv(){
var anzahlDiv = $("div").length;
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('<div id="objekt3">testlink #2</div>' ).insertAfter("#objekt2");
}else{
return;
}
exit;
}
$('#objekt1 ul li a, #objekt2 a').click(function () {
checkDiv();
});
Is there anyone here who could help me out on this one please? :(

I would do it by adding some data attributes to the html, and then process those with generalized javascript. It's more readable, and no need to modify code if the data changes.
Basically I added a data-show attribute to the links, which is a comma separated list of the div ids that needs to be visible when the link has been clicked.
HTML:
<div id="objekt1">
<ul id="listeNamen">
<li>John</li>
<li>Mary</li>
</ul>
</div>
<div id="john-info" class="infodiv">
Info about John.
More info
</div>
<div id="john-moreinfo" class="infodiv">
More info about John.
</div>
<div id="mary-info" class="infodiv">
Info about Mary.
More info
</div>
<div id="mary-moreinfo" class="infodiv">
More info about Mary.
</div>
CSS:
.infodiv {
display: none;
}
JS:
$("body").on("click", ".infolink", function (event) {
var dataShow = $(this).attr("data-show").split(",");
$(".infodiv").each(function (index, div) {
var divId = $(div).attr("id"),
visible = dataShow.indexOf(divId) !== -1;
$(div).toggle(visible);
});
event.preventDefault();
});
Here is a working demo jsfiddle.

Since you want different actions for different objects you should have differnet functions e.g.:
....
//Based on your curent code
function for_objekt1()
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('objekt2').remove();
if (anzahlDiv == 3){
$('objekt3').remove();
...
}
}
...
or something similar

Incase if you have fewer divs to show then you can do like this
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
<div id="test"></div>
<script type="text/javascript">
function first(){
$('#test').html("");
$('#test').html('or any thing you want');
}
function second(){
$('#test').html("");
$("#test").html("other thing you want"
)};
</script>
In case you have dynamic content the you can create a single function and pass its id the function and change the content of the div as you would like. It may not solve the problem but hope it would be helpful enough :)

Getting data-position value from parent div on link click

I am trying to get the data-position value using jquery on link click. Here is my code
<div class="dfd-article-tile-wrapper tile-position-6">
<div id="f_54ae4352d493b83429617a69" data-position="5" class="dfd-item tile">
<a class="dfd-item-wrap cxense" target="_blank" href="#">
<div class="imageholder">
<img src="#" alt="Depresjon - en oversikt " style="background-image: url(image.png);">
<div class="shader" style="">
<h2 class="dfd-tile-header">Hello World </h2>
<span class="source">xyz.com</span>
</div>
</div>
</a>
</div>
</div>
What I have tried so far to code this jquery code but it is not working;
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".dfd-item-wrap").click(function(event) {
var text = $(this).parents(".dfd-item").find('data-position').value
alert(text);
});
});
</script>
This is the jsfiddle link
http://jsfiddle.net/nt7243s6/
Need help and guidance. Thank you

You need to use .data() instead of .find() to get data attribute value. also use .closest(.dfd-item) or .parent() instead of .parents():
var text = $(this).closest(".dfd-item").data('position');
Complete Code:
$(".dfd-item-wrap").click(function(event) {
event.preventDefault();
var text = $(this).closest(".dfd-item").data('position');
alert(text);
});
Working Demo

The way you should access your data attributes is simply by data('position');
http://jsfiddle.net/nt7243s6/2/

How to hide/show a div inside a parent div

I am working on a site and I need to have a basic show hide functionality for part of it where, when the user clicks on a subject header, it displays an unordered list below the subject header, and then when they click on the subject header again, it will hide the content again.
I have done this in the past, but when I tried applying my code to the site I am working on, it does not work....the hidden content does not display.
Currently, I am using javascript, but if there is a better way, perhaps with pure CSS, that would be fine with me too.
Here is the code I am trying right now (I have a feeling that it isn't working becasue of a parent/child div situation, but I wasn't sure and so I was hoping someone could lead me in the right direction:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="toggle-buttons">
<div class="web-develop-toggle">
<a href="#" onClick="toggle-web-develop('web-develop-content',this)">
<img src="images/subCtxHeader3-c.png" class="img-responsive" border="0">
</a>
</div>
<div class="web-develop-content" style="display: none;">
<div class="web-develop-body">
<ul class="svc-list">
<li class="svc-bullet"><span class="svc-list">Option 1</span></li>
<li class="svc-bullet"><span class="svc-list">Option 2</span></li>
<li class="svc-bullet"><span class="svc-list">Option 3</span></li>
<li class="svc-bullet"><span class="svc-list">Option 4</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
And here is the javascript that I am using currently, which has worked for me in the past, ironically enough:
<script type="text/javascript">
function toggle-web-develop(id, link) {
var e = document.getElementById(id);
if (e.style.display == '') {
e.style.display = 'none';
} else {
e.style.display = '';
}
}
</script>
Any and all help would greatly be welcomes as I have been stuck on this for a full day.
Thanks in advance!
-- Dan

You cannot use - in a function name. Try something like toggleWebDevelop()
You are trying to find web-develop-content by id, but you are using it as a class in your HTML
<div class="web-develop-content" style="display: none;">
Should be...
<div id="web-develop-content" style="display: none;">
Also, I would use e.style.display = 'block'; instead of e.style.display = '';
DEMO