We Keep Coding

Shopify javascript Close Accordion on Clic

I'm customizing a Shopify store using Archetype Themes Motion v8.0.2. I have found a code to add tabs to my product pages. I've added media queries to my theme.css to display the tabs as an accordion at certain breakpoints. I would like to add code to close the accordion on click. I'm okay with HTML/CSS, but don't know any JS. I found the script online. Any help would be appreciated!
$(document).ready(function(){
$('ul.shopify-tabs > li').click(function(){
var tab_id = $(this).attr('data-tab');
$(this).parent().find('li').removeClass('current');
$('.shopify-tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
})
.section-tab-head {
background: #efefef;
color: #333;
display: block;
padding: 10px 10px;
cursor: pointer;
margin: 2px;
}
#media only screen and (min-width: 481px) and (max-width: 768px),
(min-width: 1051px) {
.section-tab-head {
background: none;
display: inline-block;
margin: inherit;
margin-top: 0;
}
}
.section-tab-head.current {
background: #dbdbdb;
color: #333;
}
.shopify-tab-content {
display: none;
background: none;
padding: 15px;
width: 100%;
}
.shopify-tab-content > p {
font-size: 10pt;
font-weight: 400;
}
.shopify-tab-content.current {
display: block;
font-size: 10pt;
background: white;
margin-top: 0px;
}
.shopify-tab-content > ul {
list-style: disc;
}
.shopify-tab-content > ul ul {
list-style: circle;
}
li,
.shopify-tab-content {
margin: 10px 0;
}
.shopify-tabs .shopify-tab-content {
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="shopify-tabs">
<li class="section-tab-head current" data-tab="section-tab-1"> Heading 1</li>
<div id="section-tab-1" class="shopify-tab-content current">
<p>some content goes here</p>
</div>
<li class="section-tab-head" data-tab="section-tab-2"> Heading 2</li>
<div id="section-tab-2" class="shopify-tab-content">
<p>more content in this tab</p>
</div>
<li class="section-tab-head" data-tab="section-tab-3"> Heading 3</li>
<div id="section-tab-3" class="shopify-tab-content">
<p>some content is in list form:</p>
<ul>
<li>product feature</li>
<li>product feature</li>
<li>product feature</li>
</ul>
</div>
</ul>

Add close button to each tab and add jquery code.
$('ul.shopify-tabs > li .close').click(function(){
$(this).parent().removeClass('current');
});

Create click off event on animated navigation dropdown

I have 2 problems:
I'm trying to create an click-off event, where a click off of the "nav" menu is detected, which triggers the deselection of the open list element and retracts its respective dropdown content.
My current code doesn't allow another list element/navigation item without dropdown content to be added, as doing so hinders the entirety of the code from working. I'd like to add another "nav" list element that doesn't have dropdown contents, without hindering the functionality of the other list elements and their respective dropdown content.
Here is my code (also available on JSFiddle):
$(function() {
function animate() {
$('#nav .nav-ul li').off('click', animate)
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$('#nav .nav-ul li').on('click', animate)
});
});
} else {
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$('#nav .nav-ul li').on('click', animate)
});
}
}
$('#nav .nav-ul li').on('click', animate);
});
* {
margin: 0;
padding: 0;
}
#nav {
background-color: /*blue*/
;
float: right;
}
#nav .nav-ul {
list-style: none;
float: right;
background-color: /*yellow*/
;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}
#nav .nav-ul li {
float: left;
padding: 4px;
font-weight: bold;
color: #000000;
}
#nav .nav-ul li:hover {
cursor: pointer;
text-decoration: underline;
color: #E51D27;
}
#nav .nav-ul li.detected {
color: #E51D27;
}
#nav .substitute {
float: right;
background-color: /*pink*/
;
margin-right: 4px;
}
#nav .substitute .sub-child {
float: left;
display: none;
}
#nav .substitute .sub-child.active {
display: block;
}
#nav .substitute .sub-child ul {
list-style: none;
}
#nav .substitute .sub-child ul li {
float: left;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
<ul class="nav-ul">
<li class="" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>

I'm trying to create an click-off event, where a click off of the "nav" menu is detected, which triggers the deselection of the open list element and retracts its respective dropdown content.
For this you could create a click event handler on the body that closes the menu if it's open. Something like this:
// close menu when clicking anywhere on the document
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});
Then to avoid it from closing when you click on the menu, you can use .stopPropagation() in the animate function to stop the bubbling of the events up the DOM tree when clicking on it.
My current code doesn't allow another list element/navigation item without dropdown content to be added, as doing so hinders the entirety of the code from working. I'd like to add another "nav" list element that doesn't have dropdown contents, without hindering the functionality of the other list elements and their respective dropdown content.
This happens because you are associating and disassociating events every time that you click on the menu (something that is not really necessary), so when one of the navigation items doesn't have a dropdown associated to it, the event handler is removed (with the off() in the animate function) but it is not associated again, which causes this behavior that you don't want.
The solution is simple: there's no apparent need to be detaching and re-attaching the click event handlers every time that the animate function is called. Remove the call to off and on within the animate function and that would be it.
Here you can see both changes applied to your code:
$(function() {
function animate(e) {
e.stopPropagation();
var $detected = $(this).closest('.nav-ul');
if (!$detected.hasClass("active-animation")) {
$detected.addClass("active-animation");
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$detected.removeClass("active-animation");
});
});
} else {
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$detected.removeClass("active-animation");
});
}
}
}
$('#nav .nav-ul li').on('click', animate);
// close menu when clicking anywhere on the page
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() {
$(this).removeClass("active");
});
});
});
* {
margin: 0;
padding: 0;
}
#nav {
background-color: /*blue*/
;
float: right;
}
#nav .nav-ul {
list-style: none;
float: right;
background-color: /*yellow*/
;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}
#nav .nav-ul li {
float: left;
padding: 4px;
font-weight: bold;
color: #000000;
}
#nav .nav-ul li:hover {
cursor: pointer;
text-decoration: underline;
color: #E51D27;
}
#nav .nav-ul li.detected {
color: #E51D27;
}
#nav .substitute {
float: right;
background-color: /*pink*/
;
margin-right: 4px;
}
#nav .substitute .sub-child {
float: left;
display: none;
}
#nav .substitute .sub-child.active {
display: block;
}
#nav .substitute .sub-child ul {
list-style: none;
}
#nav .substitute .sub-child ul li {
float: left;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
<ul class="nav-ul">
<li class="" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
<li>No Dropdown</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>

Change the active navbar color in css

I am using a simple top css navbar(just a css and html, without bootstrap/other framework) and i would like to change the active page. So when i go to the home page, the button color in navbar changes into red/whatever, likewise when i go to the other page...
here the code:
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
do you have an idea? it's ok to add javascript
Thanks a lot!

What I did here is when $(document).ready(function() {..} get the path using var url = window.location.pathname; so you know which link the user coming from therefore you know which menu item they clicked.
Then $('ul li a').each(function() {...} will check each menu item, try to match the url path with the menu's href attributes, if a match found, make that menu item active (with css active class added), if not match remove the active class if any. That should do the trick.
(note: assume your app is not single page app)
for Single page app it is much easier, deactive all menu item then active the one you clicked.
$(document).ready(function() {
//var url = window.location.pathname;
var url = 'http://stacksnippets.net/js#division';
console.log('url-->', url);
$('ul li a').each(function() {
var href = $(this).attr('href');
if (!!url.match(href)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>

The simplest solution would be to add an active class to the link of the page you're on:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
Then style those that class accordingly:
li a.active {
background: #F00;
}
If you're using a CMS (Wordpress, etc), adding some sort of active class on the active link is usually done for you. If you're doing your own static HTML, you would have to do it manually.

try below code for active menu
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a').on('click', function(){
$('li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover, li a.active {
background-color: #111;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>

To change the color of active link in your navigation you need to do the following things:
On click of navigation link add css class:
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
Add CSS for active class
ul li a.active {
background-color: #f4f4f4;
}

One possible way is to use the active selector in CSS. This selector highlights the active element you are using when its clicked.
a:active {
background-color: yellow;
}
a:focus {
background-color: yellow;
}
You can use some JQuery to turn it on and off too. Try looking at this post here, I think you may have get your answer.
(Related to How to keep :active css style after clicking an element)
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});

function redButtons() {
$(".inclusive-buttons").on("click", "a", function() {
$(".inclusive-buttons a").css("background", "#333");
$(this).css("background", "red");
})
}
var x = document.getElementsByTagName("li");
x.onclick = redButtons();
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
a:active {
background-color: red;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<ul class="inclusive-buttons">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
https://jsfiddle.net/m5gm7x7e/2/

HTML Part
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="News">News</li>
<li id="Contact">Contact</li>
<li id="About">About</li>
<li id="Division">Division</li>
<li id="Career">Career</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="MChoice">MChoice's</li>
</ul>
</div>
</div>
</div>
</div>
JavaScript part
$(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
CSS Part
.navbar #nav > .active > a {
color: yellow;
}
here is JSFiddle result
http://jsfiddle.net/Ag47D/775/

Here's a JSFiddle: https://jsfiddle.net/timhjellum/nw3n7eka/103/
This is a jQuery option which looks at the page URL (window.location) and specifically for a string which you define in the .indexOf(" add a unique string here ") and asks if that string is greater than -1, then locate the li element with the class you assigned to it, and add another class called active.
In the example I'm using "display" because that the URL for that iFrame that JSFiddle uses so hopefully that's not confusing.
Here's the navigation:
$(document).ready(function () {
if(window.location.href.indexOf("home") > -1) {
$(".home").addClass("active");
}
if(window.location.href.indexOf("display") > -1) {
$(".news").addClass("active");
}
//make one for each nav element
});
The HTML needs to be modified like:
<ul>
<li class="home">Home</li>
<li class="news">News</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
And then a simple css addition:
li.active {
background-color: white;
}
li.active a {
color: black;
}
If you can't use jQuery, let me know but this is the easiest solution for you to implement and allow you to easily modify

You could try having separate classes in your CSS file, like "ul-home," "ul-news," etc. and define different background colors for each, then simply set the class for your <ul> tag on each page to match the class you want. So:
.ul-home {
background-color: red;
}
.ul-news {
backrgound-color: yellow;
}
And then on your home page:
<ul class="ul-home>
<li>Home</li>
<li>News</li>
</ul>
On your news page:
<ul class="ul-news">
<li>Home</li>
<li>News</li>
</ul>
Etc. with all the other pages you have.

JS Smooth Scroll not working with tabs

I am having some issue with some code I have. I have a set of tabs that have content within each of them. When a user clicks at tab, i'd like it to open the tab content AND smooth scroll to the anchor that is in the tab content. Currently, I have the following code that opens the active tabs content and scrolls to the anchor. However, it won't smooth scroll, itll just jump to the anchor. Could someone help me so that it smooth scrolls to the anchor? I would appreciate any and all help.
Current Fiddle that shows the jump
My website with a live example of what happens
Code
var hrefname = null;
$('a').click(function () {
var $tab = $(this).closest('li')
if (!$tab.hasClass("active")) {
var tabNum = $tab.index();
var nthChild = tabNum + 1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active").hide();
$("ul#tab li:nth-child(" + nthChild + ")").addClass("active").show();
}
setTimeout(function () {
$('html, body').animate({
scrollTop: $('[name="' + hrefname + '"]').offset().top
}, 500);
var href = $('a').attr('href');
console.log(href);
hrefname = href;
return false;
}, 10000);
});
HTML Tabs
<ul id="tabs">
<li class="active">FEATURES </li>
<li>SPECIFICATIONS</li>
<li>COMPARE CONFIGURATIONS</li>
<ul id="tab">
<li class="active">
<a name="features"></a>Content 1
</li>
<li>
<a name="specs"></a>Content 2
</li>
<li>
<a name="config"></a>Content 3
</li>
CSS (for those interested)
ul#tabs {
list-style-type: none;
padding: 0;
text-align: left;
}
ul#tabs li {
display: inline-block;
background-color: #ffffff;
border-bottom: solid 3px #ffffff;
padding: 5px 12px;
margin-bottom: 4px;
margin-right: 55px;
color: #e5e5e5;
font-size: 20px;
cursor: pointer;
}
ul#tabs li:hover {
border-bottom: solid 3px #dd3333;
color: #000000;
}
ul#tabs li.active {
border-bottom: solid 3px #dd3333;
color: #000000;
}
ul#tab {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#tab li {
display: none;
}
ul#tab li.active {
display: block;
}

Fitting a <ul>'s width to accommodate the menu items

I have a menu that contains submenus. Its HTML source looks like this:
<ul id="menu">
<li>
Menu 1
<ul>
<li><a href="javascript:;">Item 1<a></li>
<li>
Subitem 1
<ul>
<li>Subsubitem 1</li>
</ul>
</li>
</ul>
</li>
</ul>
After applying some CSS and getting the JavaScript side of things in order with Superfish, the menu looks like this in the browser:
The second menu item is too big to fit into its space, so the remainder of the text is rendered onto the text of the next menu item. Is there a way to enlarge the <ul> to make sure that the text fits?
Update: here's the relevant CSS code:
ul#menu {
position: relative;
top: 160px;
left: 130px;
width: 700px;
}
ul#menu, ul#menu ul {
list-style-type: none;
}
ul#menu > li {
display: block;
float: left;
background: url(img/menuitem.png) top left;
width: 104px;
height: 37px;
margin-right: 5px;
text-align: center;
}
ul#menu > li:hover {
background-position: bottom left;
}
ul#menu > li > a {
height: 100%;
padding-top: 10px;
font-size: 80%;
font-weight: bold;
color: white;
}
ul#menu > li > a, ul#menu > li > ul a {
display: block;
text-decoration: none;
}
ul#menu > li ul {
min-width: 150px;
}
ul#menu > li > ul li {
color: black;
font-size: 10pt;
text-align: left;
padding-left: 5px;
padding-right: 5px;
height: 30px;
line-height: 30px;
background: url(img/menubg.png) repeat;
}
ul#menu > li > ul li:hover {
background-color: #9c938c;
}
ul#menu > li > ul a {
color: black;
}
ul#menu > li ul {
position: relative;
top: -10px;
}
ul#menu > li li.hoverItem > ul {
position: relative;
top: -30px;
}
ul#menu > li > a > span.sf-sub-indicator {
display: none;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
float: right;
margin-right: 5px;
}
span.sf-sub-indicator and li.hoverItem are used by Superfish. sf-sub-indicator is used to indicate that hovering over a menu item will cause a submenu to be opened like so:
<li>
Menu item with submenu<span class="sf-sub-indicator"> »</span>
<ul>
<!-- Etc -->
</ul>
</li>
li.hoverItem is applied to all menu items you passed to get to the menu where your mouse is positioned, plus the menu item your mouse is currently hovering on.

Ok, I put something together using the same css definitions that you posted above. This works for me - automatically detects the size of the largest element and adjusts the related CSS.
You'll need to adjust the li elements to have a predictable naming scheme, so that it can find the largest one. Depending on your font, you might need to adjust the *5 portion of the assignment for the newSize.
<html>
<head>
<title></title>
<meta content="">
<script type="text/javascript">
function changeSize() {
var html = document.getElementById("item"+1).innerHTML;
var newSize = html.length*5;
var num_menu_items = 3;
for (i=2; i<=num_menu_items; i++) {
var temp = document.getElementById("item"+i).innerHTML;
if (temp.length > newSize / 5)
newSize = temp.length*5;
}
var theRules = new Array();
var rule;
if (document.styleSheets[0].cssRules)
theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
theRules = document.styleSheets[0].rules
for (i = 0; i<theRules.length; i++) {
if (theRules[i].selectorText.indexOf("ul#menu > li ul") > -1) {
rule = theRules[i];
}
}
rule.style.setProperty('min-width',newSize+"px",null);
}
</script>
</head>
<body onload='changeSize();'>
<ul id="menu">
<li>A-one</li>
<li>A-two</li>
<li>A-three
<ul>
<li id='item1'>B-one</li>
<li id='item2'>B-two-is-really-really-really-really-really-really-really-really-really-really-really-really long</li>
<li id='item3'>B-three</li>
</ul>
</li>
</ul>
</body>
</html>

This block here:
ul#menu > li ul {
min-width: 150px;
}
Is where the size for that item is. You will have to change that to something larger.
The reason it doesn't expand, is because its parent's width is small than that.