We Keep Coding

Add external link to an <a> element inside a Click Event Listener Div

I'm having trouble adding a link to a button inside a card. the card is wrapped in a div element which when clicked automatically expands and closes.
Is there anyway to remove this functionality just when clicking on the details button? So it acts as a normal link?
Here is the code:
https://codepen.io/candroo/pen/wKEwRL
Card HTML:
<div class="card">
<div class="card__image-holder">
<img
class="card__image"
src="https://source.unsplash.com/300x225/?wave"
alt="wave"
/>
</div>
<div class="card-title">
<a href="#" class="toggle-info btn">
<span class="left"></span>
<span class="right"></span>
</a>
<h2>
Card title
<small>Image from unsplash.com</small>
</h2>
</div>
<div class="card-flap flap1">
<div class="card-description">
This grid is an attempt to make something nice that works on touch
devices. Ignoring hover states when they're not available etc.
</div>
<div class="card-flap flap2">
<div class="card-actions">
Read more
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
var zindex = 10;
$("div.card").click(function (e) {
e.preventDefault();
var isShowing = false;
if ($(this).hasClass("show")) {
isShowing = true;
}
if ($("div.cards").hasClass("showing")) {
// a card is already in view
$("div.card.show").removeClass("show");
if (isShowing) {
// this card was showing - reset the grid
$("div.cards").removeClass("showing");
} else {
// this card isn't showing - get in with it
$(this).css({ zIndex: zindex }).addClass("show");
}
zindex++;
} else {
// no cards in view
$("div.cards").addClass("showing");
$(this).css({ zIndex: zindex }).addClass("show");
zindex++;
}
});
});

You can check the target of the event and see if it is an <a> using is()
Something like:
$("div.card").click(function (e) {
// only run when not an `<a>`
if(!$(e.target).is('a')){
e.preventDefault();
//the rest of your code
....
}
});

I don't know Jquery but with javascript you can do this inside your code:
const links = document.querySelectorAll('.btn');
links.forEach(link => link.addEventListener('click', (e)=>e.stopPropagation()))

Change <button> text if element is :hidden or :visible

I have a button that toggles the playlistHolder div. In addition, when '.albumImage a' is selected, it also unhides the playlist. I am trying to change the text of the button to 'Show Playlist' if the playlist is hidden and 'Hide Playlist' if it is not hidden. I have tried click functions with if(('.playlist').is(:hidden)) but have not had any luck with getting it to work. I am new to Jquery so I understand that my code below can use much improvement, here is my setup now that works when the album image is selected as well as when the toggle button is selected without changing the text:
HTML
<div class="togglePlaylist">
<button id="togglePlaylistBT">Show/Hide Playlist</button>
<!-- POPUP LAUNCHER -->
</div>
<div class="playlistHolder">
<div class="componentPlaylist">
<div class="playlist_inner">
<!-- playlist items are appended here! -->
</div>
</div>
<!-- preloader -->
<div class="preloader"></div>
</div>
<div class="albumWrapper">
<div class="albumCovers">
<div class="albumImage"> <img class="img-responsive" src="media/music/Album_Covers/Swag_Brothers.jpg" alt="thumb" />
<p class="nowPlaying">Now Playing</p>
</div>
</div>
</div>
Javascript/JQuery
$('#togglePlaylistBT, .albumImage a').on('click', function() {
var $this = $('#togglePlaylistBT');
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide('slow');
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show('slow');
$this.text('Show Playlist');
}
});

Try this snippet of code:
$('.togglePlaylist button').on('click', function() {
var $this = $(this);
if($('.playlistHolder').is(':visible'))
{
$('.playlistHolder').hide();
$this.text('Hide Playlist');
}
else
{
$('.playlistHolder').show();
$this.text('Show Playlist');
}
});
Working JSFiddle

When you hide and show the playlist just run document.getElementById("togglePlaylistBT").value="Show Playlist";
For example:
function change()
{
var elem = document.getElementById("playlistButton");
if (elem.value=="Open Playlist") { elem.value = "Close Playlist"; closeBox(); }
else { elem.value = "Open Playlist"; openBox(); }
}
function openBox() {
alert("open");
}
function closeBox() {
alert("closed");
}
<input onclick="change()" type="button" value="Open Playlist" id="playlistButton"></input>
Make sure to change openBox() and closeBox() functions to your box code!

Select contents of div to fadeIn sequentially

I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working

Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/

HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?

Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")

hide menus that aren't currently selected

I have a menu with headings. When a heading is clicked, the child menu items will open. I would like to show only the menu that has most recently been clicked. If heading_practice is clicked, and other menus are open, they will slideToggle close. How can I do this?
<div id="pageHeadings">
<div id="heading_practice">
<a href="#">
<p>Practice Areas</p>
</a>
<div class="menu_practice">
<p>test</p>
<p>test2</p>
</div>
</div>
<div id="heading_about">
<a href="#">
<p>About</p>
</a>
<div class="menu_about">
<p>test</p>
<p>test2</p>
</div>
</div>
</div>
$("#pageHeadings div[class^=menu]").hide();
$("#pageHeadings div[id^=heading]").click(function () {
if(!$(this).find('[class^=menu]').is(":visible")) {
$(this).find('[class^=menu]').slideToggle("fast");
}
//if element is clicked, hide all other menus
});
Fiddle

You probably want to perform a slideUp on all the other elements. This can be achieved like so:
$("#pageHeadings div[id^=heading]").click(function () {
var $menu = $(this).find('[class^=menu]');
if ( ! $menu.is(":visible") ) {
$menu.slideToggle("fast");
}
$('[class^=menu]').not($menu).slideUp("fast");
});

Just add this line:
$('[class^=menu]').hide('fadeIn');
Like this:
$(document).ready(function () {
//hide all dropdown menus
$("#pageHeadings div[class^=menu]").hide();
$("#pageHeadings div[id^=heading]").click(function () {
// $(this).find('[class^=menu]').hide();
if (!$(this).find('[class^=menu]').is(":visible")) {
$('[class^=menu]').hide('fadeIn');
$(this).find('[class^=menu]').slideToggle("fast");
}
});
});
That will hide all others before toggling the current one.
Demo

One new line in your click function is all you need (and you can lose the if check):
$("#pageHeadings div[id^=heading]").click(function () {
$("#pageHeadings div[id^=heading]").not($(this)).find('[class^=menu]').slideUp();
$(this).find('[class^=menu]').slideToggle("fast");
});
jsFiddle example

Show/hide selected form with jQuery/CSS

i try to make an jQuery function for hide/show a form based on the user's choice!
Here is my code that you will understand better.
…
<p id="joinChoice" class="parent">
<span class="overlay"></span>
<span class="overlay"></span>
<span class="overlay"></span>
</p>
…
<div class="joinForm">
<div id="noneForm"></div>
<div id="mastercardForm"></div>
<div id="visaForm"></div>
<div id="discoverForm"></div>
</div>
The span#overlay in is a simple checkbox image replacement !
I just need a function for hide/view each form for selected Card type !
For the #joinChoice i've already make this :
$('#joinChoice a').click(function(){
$(this).addClass('on')
.siblings().removeClass('on');
});
Could you help me more please

Something like this?
HTML
<p id="joinChoice" class="parent">
<span class="overlay">Mastercard</span>
<span class="overlay">Visa</span>
<span class="overlay">Discover</span>
</p>
<div class="joinForm">
<div id="noneForm">noneForm</div>
<div id="mastercardForm">mastercardForm</div>
<div id="visaForm">visaForm</div>
<div id="discoverForm">discoverForm</div>
</div>
CSS
.joinForm div {
display: none;
}
.on {
color: red;
background: yellow;
}
jQuery
$('#joinChoice a').click(function(){
$('#joinChoice a').removeClass('on'); /* remove class from all siblings */
$(this).addClass('on'); /* add class to active sibling */
$('.joinForm div').hide(); /* hide all other forms */
var subElement = '#' + $(this).attr("id") + 'Form';
$( subElement ).show(); /* show active form */
});
And a demo

Update
I was missing an important line:
e.preventDefault();
That prevents the page to reload when clicking on the <a>s.
The HTML:
<p id="joinChoice" class="parent">
<span class="overlay"></span>
<span class="overlay"></span>
<span class="overlay"></span>
</p>
The Javascript:
$('#joinChoice a').click(function (e) {
// prevents the click event to propagate up the DOM tree
// And thus, prevents the page to reload, in that case..
e.preventDefault();
var $this = $(e.target);
// Reset others
var $links = $this.siblings();
$links.removeClass('on');
$links.each(function(linkEl) {
$( '#'+$(linkEl).data('form-id') ).hide();
});
// Activate user choice..
$this.addClass('on')
$('#'+$this.data('form-id')).show();
});