We Keep Coding

How to select only headers within a class

I am trying to hide the div if you click only on the header. But my filter does not seem to work. I get the intended function wherever I click on the div. I want to restrict this to only when you click on the header.
<div class="post" onclick="updatenext()">
<h2>Item3</h2>
</div>
<div class="post" onclick="updatenext()">
<h2>Item4</h2>
</div>
<script>
var index=0;
$(".post").hide();
$(".post").eq(0).show();
// Tried this too: $(".post").filter(":header")....
$(":header.post").on("click",
function () {
index=$(this).index();
//console.log($(this).index());
$(this).hide();
$(".post").eq(index).show();
}
);
</script>
I expect the click to work only when clicking on the header element within each div.

Try using only jQuery for the event listener, like this:
<div class="post">
<h2 onclick="updatenext()">Item3</h2>
</div>
<div class="post">
<h2 onclick="updatenext()">Item4</h2>
</div>
<script>
var index = 0;
$(".post").hide();
$(".post").eq(0).show();
$("h2").on("click", function () {
index = $(this).parent().index();
$(this).parent().hide();
$(".post").eq(index).show();
});
</script>

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()))

Jquery toggle sidebar with 2 buttons

I am trying to create a toggle on a sidebar so that the toggle button opens the sidebar. This works great on desktop, however, if I am using mobile, the toggle button gets hidden. Is it possible to add a close button in the sidebar which can close the sidebar without breaking the script? The script I have is:
<div id="sidebar">content</div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
jQuery(document).ready(function() {
jQuery("#filter-icon").click(function() {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
});
});
</script>

Shouldn't be a problem, have you tried something like this?
<div id="sidebar"><button id="closeSidebar">Close</button></div>
<div id="filter-icon">Refine Selection <div id="filterswitch"></div></div>
<script>
const toggleSidebarAndSwitch = () => {
jQuery("#filterswitch").toggleClass('active');
jQuery("#sidebar").toggleClass('show-sidebar');
}
jQuery(document).ready(() => {
jQuery("#filter-icon").click(() => {
toggleSidebarAndSwitch()
});
jQuery("#closeSidebar").click(()=>{
toggleSidebarAndSwitch()
})
});
</script>

Yes it's possible just add another div in your sidebar like this:
<div id="sidebar">
content
<div class="filterswitch"></div>
</div>
<div id="filter-icon">
Refine Selection
<div class="filterswitch"></div>
</div>
If you ad the class filterswitch to both div's jQuery will automatically listen for clicks on both elements.

Toggle on button click

I am new to web development. And I am stuck with one issue. I have implemented a flip functionality. Where if I click on the div, the element flips. Below is what I have tried.
<div class = "flip" id = "flip">
<div class = "front">
<div id = "chartAnchor1" class="x_content">
</div>
</div>
<div class = "back">
<div id = "abcanchor1" class="x_content">
</div>
</div>
</div>
Here abcanchor1 and chartanchor are the anchor where the actual template is embedded. I am using https://nnattawat.github.io/flip/ plug in to implement flip.
At present I am able to flip when the div is clicked. But I want that to happen on button click.
Code to flip :
$("#flip").flip();
But all it does is, it flips the element when clicked upon. So, default trigger is 'click' event.
I want the same functionality to work by cliking on a button rather than clicking on the div itself.
<button type="button" id = "toggle" class = "toggle">Click Me!</button>
Everything (flip) is working fine. All I want is to trigger the flip on a button click. It's given in this link: https://nnattawat.github.io/flip/ on how to implement the flip (toggle) on button click but I am not able to implement that. Can someone guide me.
EDIT
<script>
$(function()
{
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
});
</script>
Error: When the button is clicked I get this error
firstDashboard.html:34 Uncaught TypeError: $(...).flip is not a function
EDIT 2:
Code Base:
<button type="button" id = "toggle" class = "toggle">Click Me!</button>
<div class = "flip" id = "flip">
<div class = "front">
<div id = "chartAnchor1" class="x_content">
</div>
</div>
<div class = "back">
<div id = "abcanchor1" class="x_content">
</div>
</div>
</div>
<script src="../Scripts/jquery.flip.js"></script>
<script>
$(function()
{
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
}); });
</script>
Error: Uncaught TypeError: $(...).flip is not a function
:

Please check this demo: https://jsfiddle.net/hv83LLbw/
You need to set trigger to manual:
$("#flip").flip({
trigger: 'manual'
});
and then attached the click event handling:
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
The over all
$(document).ready(function() {
$("#flip").flip({
trigger: 'manual'
});
$('#toggle').click(function() {
$("#flip").flip('toggle');
});
});

You can do this by hooking a click event to that button and calling flip() within the event handler, like this:
<div class="flip" id="flip">
<div class="front">
<div id="chartAnchor1" class="x_content"></div>
</div>
<div class = "back">
<div id="abcanchor1" class="x_content"></div>
</div>
</div>
<button type="button" id="toggle" class="toggle">Click Me!</button>
$('#toggle').click(function() {
$('#flip').flip();
});

Show a child div when link clicked

I have a series of divs with links and hidden divs. When the link is clicked, I need the hidden div within the parent to be shown. For example:
<div class="track" id="track1">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes"></div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
So far, the option that I tried opened up ALL of the .song-notes divs, but I want to specify that it's only the child divs of the parent div where the link is contained that should be opened.

I like using .toggle() here.
$('a.notes-link').click(function (){
$(this).next('.song-notes').toggle();
});
jsFiddle example

try this
$(document).ready(function(){
$('.notes-link').click(function(ev){
ev.preventDefault();
$(this).closest('.track').find('.song-notes').show();
});
});
DEMO

You can do this:
$(function () {
$('.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show();
});
});
Demo

$(function () {
$('div.track a.notes-link').click(function (e) {
e.preventDefault();
$(this).next().show(); //$(this).next().toggle();--> to show hide
});
});
.next()
.toggle()

Add id to the hidden divs
<div class="track" id="track1">
Song Notes
<div class="song-notes" style="display:none" id="song1">1</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
<div class="track" id="track2">
Song Notes
<div class="song-notes" style="display:none" id="song2">2</div> <!-- HIDDEN DIV TO BE SHOWN WHEN LINK CLICKED -->
</div>
Javascript Code:
function showNotes(id){
$('#song'+id).toggle();
}
Demo:
http://jsfiddle.net/Zz65U/