I am trying to add a CSS class with an onclick event using JavaScript.
This is my html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="weekly.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="sf_new_calendar_weekly_container">
<div class="sf_day_card">
<div class="sf_day_card_heading">
<h5>MON</h5>
<p>January 9</p>
</div>
<div class="events">
<div class="sf_parks_hours">
<div class="sf_general_hours">
</div>
<div class="sf_park_events_hours">
</div>
<div class="sf_park_events_hours">
</div>
</div>
</div>
</div>
<div class="sf_day_card">
<div class="sf_day_card_heading">
<h5>TUE</h5>
<p>January 10</p>
</div>
<div class="events"><div class="sf_parks_hours">
<div class="sf_general_hours">
</div>
<div class="sf_park_events_hours">
</div>
<div class="sf_park_events_hours"></div>
</div></div>
</div>
<div class="sf_day_card">
<div class="sf_day_card_heading">
<h5>WED</h5>
<p>January 11</p>
</div>
<div class="events">
<div class="sf_parks_hours">
<div class="sf_general_hours">
</div>
<div class="sf_park_events_hours">
</div>
<div class="sf_park_events_hours">
</div>
</div>
</div>
</div>
<div class="sf_day_card_open sf_day_card_open_yellow ">
<div class="sf_day_card_heading bg_yellow">
<h5>THU</h5>
<p>January 12</p>
</div>
<div class="events">
<div class="sf_parks_hours">
<div class="sf_general_hours">
<i class="fa-regular fa-clock"></i>
<p>10AM - 6PM</p>
</div>
<div class="sf_park_events_hours">
<p class="event-title">Water Park</p>
<p class="event-hours">10AM - 6PM</p>
</div>
<div class="sf_park_events_hours">
<p class="event-title">Safari</p>
<p class="event-hours">10AM - 6PM</p>
</div>
<hr>
</div>
<div class="sf_events">
<div class="sf_park_event_heading">
<i class="fa-regular fa-flag"></i>
<p class="event_name">Pass Holder Appreciation Week</p>
</div>
<div class="sf_park_event_heading">
<i class="fa-regular fa-flag"></i>
<p class="event_name">Christmas in the Park</p>
</div>
</div>
</div>
</div>
<div class="sf_day_card_open">
<div class="sf_day_card_heading ">
<h5>FRI</h5>
<p>January 13</p>
</div>
<div class="events">
<div class="sf_parks_hours">
<div class="sf_general_hours">
<i class="fa-regular fa-clock"></i>
<p class="event-hours">10AM - 6PM</p>
</div>
<div class="sf_park_events_hours">
</div>
<div class="sf_park_events_hours">
</div>
</div>
</div>
</div>
<div class="sf_day_card_open">
<div class="sf_day_card_heading">
<h5>SAT</h5>
<p>January 14</p>
</div>
<div class="events">
<div class="sf_parks_hours">
<div class="sf_general_hours">
<i class="fa-regular fa-clock"></i>
<p class="event-hours">10AM - 6PM</p>
</div>
<div class="sf_park_events_hours">
</div>
<div class="sf_park_events_hours">
</div>
</div>
</div>
</div>
<div class="sf_day_card">
<div class="sf_day_card_heading">
<h5>SUN</h5>
<p>January 15</p>
</div>
<div class="events">
<div class="sf_parks_hours">
<div class="sf_general_hours">
</div>
<div class="sf_park_events_hours">
</div>
<div class="sf_park_events_hours">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
And this is my script where I target the divs with a class that I am targetting.
let heading = document.querySelectorAll(".sf_day_card_heading");
I want to add a CSS class that changes the background color to yellow to the div that I select but I don´t know how to start with the logic.
I know I have to do a function with an onclick event and add the CSS class but I don't know how.
This may help:
At first, you need to add an id to HTML div tag:
<div id="dayCardHeading" class="sf_day_card_heading">
then add event listener in javascript:
let heading = document.getElementById("dayCardHeading");
heading.addEventListener("click", modifyColor);
function modifyColor() {
document.getElementById("modifyColor").style.background = "#F7B538" ;
}
find out more:
Event Target addEventListener
if it was helpful please mark it.
This will add a class to an element that you click and remove the class from other elements similar elements
let heading = document.querySelectorAll(".sf_day_card_heading");
heading.forEach((el) => {
el.addEventListener('click', (event) => {
heading.forEach((e) => e.classList.remove('your_class_name'));
event.target.classList.add('your_class_name'));
});
});
Let me know if this helps.
Add an event listener to the document object where you listen for click events. Whenever a click happens, check if the user clicked on (or within) the .sf_day_card_heading div. Add the class based on the result.
document.addEventListener('click', event => {
const target = event.target.closest('.sf_day_card_heading');
if (target !== null) {
target.classList.add('bg_yellow');
}
});
Try this one:
let heading = document.querySelectorAll(".sf_day_card_heading");
function activeDiv(e) {
heading.forEach((item) => item.classList.remove('bg_yellow'))
e.classList.add('bg_yellow')
}
heading.forEach(item => item.addEventListener('click', (e)=>activeDiv(item)))
In the first line, you select all the elements:
let heading = document.querySelectorAll(".sf_day_card_heading");
Next, in the activeDiv() , you remove each bg_yellow class from every element and add the class bg_yellow to only one element:
function activeDiv(e) {
// removes the class from every element
heading.forEach((item) => item.classList.remove('bg_yellow'))
// adds the class
e.classList.add('bg_yellow')
}
Finally, you attach the click event to each element in the heading array, which calls activeDiv() function to add a class:
heading.forEach(item => item.addEventListener('click', (e)=>activeDiv(item)))
once you have the particular element in a variable you use it to access the properties. In your example, you can play with the CSS by:
heading.style.border = "1px solid #000";
heading.style.backgroundColor: "#fff";
You are getting the elements correctly using document.querySelectorAll. In order to listen to a click event on each element, you can add loop through each and add an event listener.
Event listeners work just like HTML attributes like onclick, but are generally considered more reliable for a number of reasons, including the fact that one element can have multiple event listeners for the same event while it can only have one onclick attribute.
In order to toggle a CSS class on an element, you can use element.classList.toggle(className)
In your case, you can loop through the elements using a for...of loop and add an event listener to each using addEventListener. Then in the event listener, toggle the yellow CSS class:
const headings = document.querySelectorAll(".sf_day_card_heading");
for (const heading of headings) {
heading.addEventListener("click", (event) => {
// This adds the class "background-yellow" to the element.
// You can select the `background-yellow` class in your CSS,
// or you can use a different class name and modify it here.
heading.classList.toggle("background-yellow")
});
}
You can use this with code like this in your CSS:
.background-yellow {
background-color: yellow;
}
Related
I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.
Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.
HTML:
$('.blog-post-image').each(function() {
var $me = $(this);
var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');
$me.attr('src', blogPostImage);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
.blog-post-image doesn't have any siblings. Siblings are immediate children of the same parent element, but there are no other elements in the div containing <img class="blog-post-image" />.
You need to go up to the .blog-header to get its sibling.
Also, instead of using .each(), you can use a function in .attr(). It automatically loops, and assigns the return value to the attribute.
$('.blog-post-image').attr('src', function() {
return $(this).closest('.blog-header').siblings('.blog-content').find('img').attr('src');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">
15/6/2021
</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
Two things:
1.) .blog-content is not a sibling of .blog-post-image
2.) .children() only looks one level deep to find the element you are looking for.
What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.
$('.blog-post-image').each(function() {
var me = $(this);
var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
me.attr('src', blogPostImage);
});
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="blog-post-746510653886732592" class="blog-post">
<div class="blog-header">
<div class="blog-post-container">
<h2 class="blog-title">
</h2>
<p class="blog-date">
<span class="date-text">15/6/2021</span>
</p>
<div>
<img class="blog-post-image" />
</div>
</div>
</div>
<div class="blog-content">
<div>
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
</a>
<div style="display:block;font-size:90%">
</div>
</div>
</div>
</div>
</div>
</body>
I want to show a modal popup when the user clicked a button, but it keeps adding to the innerHTML
<div class="popup-container hide">
<div class="popup-wrapper">
<!-- <div class="popup-content"> -->
<!-- </div> -->
<div class="order-container">
<div class="value-container">
<button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
<div class="value">1</div>
<button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
</div>
<button class="orderBtn">Add To Cart</button>
</div>
</div>
</div>
Here I create a new div and insert it into the parent, and showing the clicked data with literal template
let content = document.createElement('div');
content.classList.add('popup-content');
content.innerHTML = `
<div class="popup-image">
<img src="mcd/${item.img}" alt="">
</div>
<div class="popup-name">
${item.name}
</div>
<div class="popup-price">
${item.price}
</div>
`;
let wrapper = document.querySelector('.popup-wrapper');
let orderContainer = document.querySelector('.order-container');
wrapper.insertBefore(content, orderContainer);
You need to remove all existing .popup-content elements before you insert a new one if you want only one to appear.
document.querySelectorAll('.popup-content').forEach(el => el.remove());
let content = document.createElement('div');
...
My program is a game that begins with 4 playable characters each in their own div with class charContainer, these 4 divs are in a container with class character. When the player picks a character by clicking on them, it moves it to a container with class your. After that the remaining unchosen characters in the container characters move to another div container called enemies. This div would have the remaining 3 unclicked divs moved to it. After this, the player selects an opponent. I am trying to move the selected opponent to the div container called opponent, but it keeps getting appended to the your container. I tried removing the class name charContainer and adding class foes and it still does not work.
$(document).ready(function() {
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each(function() {
$(this).removeClass('charContainer').addClass('foes');
$('#enemies').append($(this));
})
$('.characters').remove();
})
$('.foes').on('click', function() {
$('#opponent').append($(this));
// $(this).appendTo('#opponent');
$(this).addClass('defender');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
<div class="charContainer darth">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp="120"></p>
</div>
<div class="charContainer luke">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp="100"></p>
</div>
<div class="charContainer won">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp="150"></p>
</div>
<div class="charContainer maul">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp="180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
<h2>Fight Section</h2>
<button id="attack" class="attk">
<h1>Attack</h1>
</button>
</div>
<div id="opponent">
<h2>Opponent</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
After removing the charContainer class and adding the foes class, the onclick function for foes still sends it to the your div even though I got rid of charContainer. I need it to go to the opponent div.
Call .off("click")
$(".characters>.charContainer").off("click")
within .characters>.charContainer click handler to detach click from .charContainer elements.
Use event delegation, .one() at #enemies element, if only one .foes element should be append to #opponenent element
$('#enemies').one('click', ".foes", function() {})
when attaching click to #enemies element for handler to be called when elements having dynamically added className foes are clicked
$(document).ready(function() {
$('.charContainer').on('click', function(e) {
$("#your").append(this);
$('.characters>.charContainer')
.off("click")
.each(function() {
$(this).removeClass('charContainer')
.addClass('foes');
$('#enemies').append(this);
})
$('.characters').remove();
})
$('#enemies').one('click', ".foes", function() {
$('#opponent').append($(this));
// $(this).appendTo('#opponent');
$(this).addClass('defender');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
<div class="charContainer darth">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg" alt="vader">
<p id="c1hp" data-hp="120"></p>
</div>
<div class="charContainer luke">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg" alt="luke">
<p id="c2hp" data-hp="100"></p>
</div>
<div class="charContainer won">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg" alt="obiwan">
<p id="c3hp" data-hp="150"></p>
</div>
<div class="charContainer maul">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png" alt="maul">
<p id="c4hp" data-hp="180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
<h2>Fight Section</h2>
<button id="attack" class="attk">
<h1>Attack</h1>
</button>
</div>
<div id="opponent">
<h2>Opponent</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
The primary issue is that you are adding your "character" click event listener to each actual <div class="charContainer"> with the code:
$('.charContainer').on('click', function(){...
Then, once you had moved the charContainer divs to enemies those event listeners were still on the charContainer divs. Thus, when you clicked on one, it was moved to the your div. You can solve this by either removing the listener using .off('click') on each div, or using event delegation. In the code below, I chose event delegation.
In addition, you were trying to add listeners to any .foes immediately after adding the other listeners, but before the user clicked on anything. At the time the code:
$('.foes').on('click', function() {...
was executed, there was nothing in your document that matched the selector '.foes'. Thus, no event listeners were added.
To solve this, I changed:
In your HTML:
<div class="characters">
to
<div id="characters">
You are using characters to uniquely identify that specific div, not to groups one or more elements. Thus, for the way that you are using it, characters is more appropriate as an id than a class.
In your JavaScript, the primary changes are to change your event listeners to be on the container div elements, but to only execute your handler when the element matches the selector '.charContainer'. For example,
$('#characters').on('click', '.charContainer', function(e) {...
adds a click event handler to all elements which match the selector '#characters'. That is the div which contains the characters which you are selecting from for your character. The second argument to .on() tells jQuery to only execute your handler when the event target (e.target) matches the selector .charContainer.
Your other event handler, for foes, I changed to:
$('#enemies').on('click', '.foes', function(e) {
As with the characters listener, this uses event delegation to have this event listener on your <div id="enemies">, but only execute your handler when the event target matches the selector '.foes'.
I also changed your use of this to e.target within your event handlers when you were using it to refer to the target of the event. While your use was fine, when using functions within an event handler which change the value of this (.each(), here) I find that using the explicit event target, provides for more maintainable code.
$(document).ready(function() {
$('#characters').on('click', '.charContainer', function(e) {
$('#your').append(e.target);
$('#characters>.charContainer').each(function() {
$(this).removeClass('charContainer').addClass('foes');
$('#enemies').append($(this));
})
$('#characters').remove();
})
$('#enemies').on('click', '.foes', function(e) {
$('#opponent').append(e.target);
$(e.target).addClass('defender');
$('#enemies').remove(); //Added this to match action on picking character.
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="characters">
<!-- Added style="display: inline-block;" to characters because that looks
better in a snippet-->
<div class="charContainer darth" style="display: inline-block;">
<h2 id="c1"></h2>
<img class="vade" src="http://i.stack.imgur.com/jy5g5.png">
<p id="c1hp" data-hp="120"></p>
</div>
<div class="charContainer luke" style="display: inline-block;">
<h2 id="c2"></h2>
<img class="skywalker" src="http://i.stack.imgur.com/X7VCH.png">
<p id="c2hp" data-hp="100"></p>
</div>
<div class="charContainer won" style="display: inline-block;">
<h2 id="c3"></h2>
<img class="obi" src="http://i.stack.imgur.com/oOUwX.png">
<p id="c3hp" data-hp="150"></p>
</div>
<div class="charContainer maul" style="display: inline-block;">
<h2 id="c4"></h2>
<img class="dmaul" src="http://i.stack.imgur.com/wRMuO.png">
<p id="c4hp" data-hp="180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
<h2>Fight Section</h2>
<button id="attack" class="attk">
<h1>Attack</h1>
</button>
</div>
<div id="opponent">
<h2>Opponent</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
I'm not saying this is the most efficient way of producing your desired result, but the smallest number of changes required to your code to get your desired result is to:
Remove the initial click handlers once the first div is clicked. Do this by using $('.charContainer').off('click') once one such div is clicked.
Move your $(.foes).on('click', ... into the original click handler.
$(document).ready(function() {
$('.charContainer').on('click', function() {
$('.charContainer').off('click'); // *** add this line
$('#your').append($(this));
$('.characters>.charContainer').each(function() {
$(this).removeClass('charContainer').addClass('foes');
$('#enemies').append($(this));
});
$('.characters').remove();
$('.foes').on('click', function() { // *** move this into the click handler
$('#opponent').append($(this));
$(this).addClass('defender');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
<div class="charContainer darth">
<span>1</span><img class="vade" src="assets/images/vader.jpg">
</div>
<div class="charContainer luke">
<span>2</span><img class="skywalker" src="assets/images/luke.jpg">
</div>
<div class="charContainer won">
<span>3</span><img class="obi" src="assets/images/obiwan.jpg">
</div>
<div class="charContainer maul">
<span>4</span><img class="dmaul" src="assets/images/maul.png">
</div>
</div>
<div id="your">
<h2>Your Character</h2>
</div>
<div id="enemies">
<h2>Enemies</h2>
</div>
<div id="opponent">
<h2>Opponent</h2>
</div>
With my inexperience in jQuery, I'm finding the simplest tasks difficult.
What I attempt to do is show/hide certain messages when a certain icon is clicked. This is my HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="measure">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large" value="locate">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small" value="inform">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
</div>
</div>
My JavaScript code that changes the pov icon/title classes works and is currently here:
$('.pov_icon_small , .pov_icon_large').on('click', function () {
$('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
$('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small');
$(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
$(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});
What I aim to do, is display a certain message (e.g. Message Measure) when the a certain icon pov_icon_small value="measure" is clicked while keeping the others hidden. When the user clicks another icon; that respective message will be displayed and the others will be hidden :
$(document).ready(function(){
$('input[.pov_icon_small]').click(function(){
if($(this).attr("value")=="measure"){
$(".pov_description").not("#measure").hide();
$("#measure").show();
}
if($(this).attr("value")=="locate"){
$(".pov_description").not("#locate").hide();
$("#locate").show();
}
if($(this).attr("value")=="inform"){
$(".pov_description").not("#inform").hide();
$("#inform").show();
}
});
The message-linking JS code doesn't seem to work. Am I doing a small error here? Or should I be preparing the code in a completely different way?
Theres two issues, first your CSS selector input[.pov_icon_small] is not valid. The second is that you are attaching the click function to pov_icon_small which do not have enough height or width for a user to click. I've adjusted the HTML so this binds to the pov_title_small class instead.
You'll want to attach your click function to items have a value, then pass that value as the selector. For pov_title_small I've changed the attribute value to data-value, then the click function uses that to select the ID you want to display. Here is the code:
HTML:
<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-clock-o"></i>
</div>
<div class="pov_title_small" data-value="measure">
MEASURE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_large">
<i class="fa fa-map-marker"></i>
</div>
<div class="pov_title_large" data-value="locate">
LOCATE
</div>
</div>
<div class ="col-md-2 pov_icon">
<div class="pov_icon_small">
<i class="fa fa-commenting"></i>
</div>
<div class="pov_title_small" data-value="inform">
INFORM
</div>
</div>
<div id="measure" style="display:none" class="pov_description">
<p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
<p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
<p> Message INFORM</p>
</div>
Javascript:
$(document).ready(function(){
$('[data-value]').bind('click', function(){
$('.pov_description').hide();
$('#'+$(this).attr('data-value')).show();
});
});
You can see it working in this JS Fiddle: http://jsfiddle.net/h97fg75s/
1st : you just need to get a value and convert it to id ..
2nd: like #juvian mentioned $('input[.pov_icon_small]') is not a valid selector
3rd .pov_icon_small its a div not an input so you can use $('div.pov_icon_small') instead
4th: .pov_icon_small doesn't have any value attribute .. .pov_title_small and .pov_title_large those has the value attribute
$(document).ready(function(){
$('div.pov_title_small , div.pov_title_large').click(function(){
var ThisValue = $.trim($(this).attr('value'));
$(".pov_description").not("#"+ThisValue).hide();
$("#"+ThisValue).slideToggle()
});
});
Working Demo
if you need to control it from .pov_icon you have 2 ways
1st: put a value attribute in .pov_icon_small/large
2nd: you can use
$('div.pov_icon_small , div.pov_icon_large').click
and
var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));
I have issues when trying to place an event to toggle a div using an element outside of the parent container.
I trying to target the same behavior from outside of the parent elements using a span tag.
Any help would be grateful.
HTML:
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
Javascript:
$('.toggler').live('click',function(){
/* $(this).parent().children().toggle(); //swaps the display:none between the two spans */
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action
});
Amended your example to suit the purpose.
<div id="container">
<div>
<div>
<span class='open'>Open</span>
<span class='close' style='display:none;'>Close</span>
</div>
<div class='content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='close'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggle">Gain Early Access</span>
</div>
$(".toggle").click( function( ) {
$(".content").slideToggle();
});
$(".open").click( function( ) {
$(".content").slideDown();
});
$(".close").click( function( ) {
$(".content").slideUp();
});
Just use a global parent div.
<div id="container">
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
</div>
And you can just do this :
var container = $('#container');
container.on('click', '.toggler', function() {
container.find('.toggleHolder .toggler').toggle();
container.find('.toggle_content').slideToggle();
});
By the way, if you use jQuery 1.7 or more, live is deprecated. See http://api.jquery.com/live/