We Keep Coding

I have four menu buttons, but only one pop-up window through jQuery, can I generalize or do I need four different windows?

I picked up HTML/CSS/Js a few days ago and I made my first very own website. I have this code that is a pop-up:
<div class="popupwindow">
<div class="popupbody">
<button class="closebtn">X</button>
<h3>Title</h3>
<p>Text</p>
</div>
</div>
And I have a menu with four buttons. The buttons look like so:
<ul>
<li class="menuone">button one</li>
<li class="menutwo"><a href="#">button two</a</li>
<li class="menuthree">button three</li>
<li class="menufour">button four</li>
</ul>
Right now my jQuery code only triggers when the button with the tag "menuone" is pressed.
My question is, can I use the same jQuery code somehow and generalize this?

You can use jquery selector for all buttons like following:
$('ul li a').on('click', function(){
// write your code here
})

Hiding subsections of a timeline based on current slide?

I have a timeline for my product tour that has 4 main sections, with 4-5 subsections in between, it is set up like this:
<ul class="slideshow-timeline">
<li class="active-target-main main-section">Target
<ul class="current-section target-sub">
<li>Donor Profiles</li>
<li>Segmentation</li>
<li>Custom Lists</li>
<li>RFM Analysis</li>
<li>Wealth Screening</li>
</ul>
</li>
<li class="main-section">Connect
<ul class="current-section connect-sub">
<li>Email Marketing</li>
<li>Social Media</li>
<li>Direct Mail</li>
<li>Welcome Series</li>
</ul>
</li>
<li class="main-section">Convert
<ul class="current-section convert-sub">
<li>Donation Forms</li>
<li>Automated Receipts</li>
<li>Events</li>
<li>Member Mgmt</li>
<li>Moves Mgmt</li>
</ul>
</li>
<li class="main-section">Optimize
<ul class="current-section optimize-sub">
<li>Analytics</li>
<li>Campaigns/Funds/Appeals</li>
<li>A/B Testing</li>
<li>Task Management</li>
</ul>
</li>
</ul>
I am looking for a JS solution to allow me to hide the connect-sub, convert-sub, and optimize-sub while the .active-tour div has a class of target-panel.
I attempted this by using .css but was wondering if there would be a more-elegant solution?
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".connect-sub").css("display", "none");
$(".convert-sub").css("display", "none");
$(".optimize-sub").css("display", "none");
}
});
Since the timeline and slides are set as position:absolute and position:fixed it is not sitting in the page flow, so I can't just target it in css.
In theory, this JS should work, but for some reason, it doesn't want to hide the 3 sub sections. No errors are being thrown either. Here is my working page.
I will continue looking into a solution, but if any of you could point me in the right direction, I'd really appreciate it!
Updated to hide all subnavs and show with javascript:
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".target-sub").css("display", "block");
}
});

Updated answer:
Use a containing div for both the main content and the footer timeline. Set the class on this outer div using jQuery and use css selectors to show the correct submenu items accordingly.
updated fiddle here
original answer:
Here's a quick and dirty way to do it:
$('.main-section').on('click',function(){
$('.main-section').removeClass('active-tour');
$(this).addClass('active-tour');
});
.current-section{
display:none;
}
li.active-tour .current-section{
display:block;
}
fiddle here

How to use click function with $(this) on children elements with the same class?

I want to create dropdown with country->region->city selection.
The first ul opens from click on that span and the others set to show on hover (code at the bottom).
<input type="text" id="srch-area" alt="" class="c-textfield suggestionsInput " name="locationStr" maxlength="" size="" tabindex="3" title="" value="Deutschland" defaultvalue="" highlight="y" strict="y" autocomplete="off">
<span class="c-icon-arrow-green-down-left c-icon" id="loc-slctbx"></span>
<ul class="dropdown-location-ul" id="dropdown-country" style="display:none;">
<li class="dropdown-location-li">
<strong>Deutschland</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Brandenburg</strong>
<ul class="dropdown-location-ul" style="display:none;">
<li class="dropdown-location-li">
<strong>Oranienburg</strong>
</li>
<li class="dropdown-location-li">
<strong>Schwedt</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>Berlin</strong>
</li>
...
</ul>
</li>
<li class="dropdown-location-li">
<strong>France</strong>
</li>
...
</ul>
$('.dropdown-location-li').hover(function(){
$(this).children('ul').css('left', $(this).parent('ul').width()+'px');
$(this).children('ul').show();
}, function(){
$(this).children('ul').hide();
});
This works just fine and now i need to make it on click to change value of near input to the name of location inside strong tag. I tried the code below but it appears that $(this) selecting the element and all his parents, but i need to get location from only the one i clicked. Please tell me how to do that correctly? Maybe i have completely wrong approach to do this and need to make all with id's and stuff, but i just wanted to minimise the amout of repeating js.
$('.dropdown-location-li').click(function(){
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});
This is how it shows in console. AS you can see when i click on Oranienburg it selects Brandenburg and Deutschland as well which are the parents of the element i clicked.
console screenshot

You have nested .dropdown-location-li elements, so the click keeps propagating up to the other LI elements, firing the event handler again etc.
You should stop the propagation the first time
$('.dropdown-location-li').click(function(e){
e.stopPropagation();
$('#srch-area').val($(this).children('strong').text());
$('#dropdown-country').hide();
});

try to use JQuery Find
$(this).find('strong').text()

Close off-canvas mobile menu when link is clicked (JS)

I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>

I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});

This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>

how to Get an id of DOM elements using JQuery

I'm having some problems understanding the stracture of JQuery elements and how to move through the DOM tree.
My aim is to highlight (background color) the clicked link (a).
if the "li a" is inside ul which is not the main "menu" ul (meanning sub-menu link) then i want to highlight both the sub menu link and the top menu link.
My HTML code is:
<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
<li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
<li>read
<ul class="par">
<li><a href="welcome.html" id="b" title="title" >test</a></li>
<li>addRead</li>
</ul>
</li>
<li><a href="books.aspx" title="Books" >Books</a>
<ul class="par">
<li>Search</li>
<li>Register</li>
</ul>
</li>
<li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>
</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>
</body>
As for the JQuery i tried this:
$(this).closest("ul").find("a").attr("id"));
and a few other versions with parents but i get "undefined" or empty strings when i check with alerts.
Can you help me understand where is my mistake?
I'm sure it's something very simple i just can't find it.
Thanks

To highlight the submenu link and its top most parent link use the following code:
$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");
The first line highlights the link.
The second line will look for the top-most 'li' then select its immediate 'a' tag and highlight it
UPDATE:
To remove the highlight of the previous click use a CSS class:
.highlight {
background-color: red;
}
Then use the following code:
$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');