I searched for a way to show a DIVs content after clicking an image. I found a solution on JSFiddle here.
Now I'm trying to get it to work for 3 DIVs. That's how I've done that:
<script>
$("#lol_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#lol_team").toggle();
});
</script>
<script>
$("#csgo_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#csgo_team").toggle();
});
</script>
<script>
$("#cod_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#cod_team").toggle();
});
</script>
<!-- first team -->
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/> <div id="csgo_team">
<h2>CS:GO Team Lineup:</h2>
</div>
<!-- second team -->
<img src="./img/team_lol.png" alt="League of Legends"/>
<div id="lol_team">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<!-- thrid team -->
<img src="./img/team_cod.png" alt="Call of Duty"/>
<div id="cod_team">
<h2>Call of Duty Team Lineup:</h2>
</div>
When I click at the firs/second/third div, all of them will open/close. What do I need to change so they will open/close one by one?.
Calling $("a").on("click") will attach the click event to all <a>'s on the page. You only want one anchor to effect one div, so you should attach ID's to all of them, and add the event to toggle them after. See the following updated code:
$("#lol_team").hide();
$("#lol_team_anchor").on("click", function(e){
e.preventDefault();
$("#lol_team").toggle();
});
$("#csgo_team").hide();
$("#csgo_team_anchor").on("click", function(e){
e.preventDefault();
$("#csgo_team").toggle();
});
$("#cod_team").hide();
$("#cod_team_anchor").on("click", function(e){
e.preventDefault();
$("#cod_team").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/> <div id="csgo_team">
<h2>CS:GO Team Lineup:</h2>
</div>
<!-- second team -->
<img src="./img/team_lol.png" alt="League of Legends"/>
<div id="lol_team">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<!-- thrid team -->
<img src="./img/team_cod.png" alt="Call of Duty"/>
<div id="cod_team">
<h2>Call of Duty Team Lineup:</h2>
</div>
Ideally though, you can simplify this to something like below:
//Hide all divs with class of 'toggleContainer' by default:
$('div.toggleContainer').hide();
//Attach a click event to all anchors with class of 'toggle'
$('a.toggle').on('click', function(e) {
//Ignore the click (Prevent it from trying to load whatever is in 'href'. If it's '#' (This will prevent the page from going to the top)
e.preventDefault();
//Get the associated toggle container for this anchor
$(this).next('div.toggleContainer').toggle();
});
//Hide all toggleContainers by default:
$('div.toggleContainer').hide();
$('a.toggle').on('click', function(e) {
e.preventDefault();
//Get the associated toggle container for this anchor
$(this).next('div.toggleContainer').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/>
<div class="toggleContainer">
<h2>CS:GO Team Lineup:</h2>
</div>
<!-- second team -->
<img src="./img/team_lol.png" alt="League of Legends"/>
<div class="toggleContainer">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<!-- thrid team -->
<img src="./img/team_cod.png" alt="Call of Duty"/>
<div class="toggleContainer">
<h2>Call of Duty Team Lineup:</h2>
</div>
give the <a> tags id's so that when you add the click event it will catch on only 1 anchor.
otherwise the click goes on every anchor in the page
All I did here is add a data-target attribute to each <a> with value as the ID of the corresponding div and use it to toggle the div. It's that simple
I also replaced the href="#" to href="javascript:;" to avoid the page to scroll at the top.
$('a').click(function(){
$($(this).attr('data-target')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->
<a href="javascript:;" data-target="#csgo_team">
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/>
</a>
<div id="csgo_team">
<h2>CS:GO Team Lineup:</h2>
</div>
<br>
<!-- second team -->
<a href="javascript:;" data-target="#lol_team">
<img src="./img/team_lol.png" alt="League of Legends"/>
</a>
<div id="lol_team">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<br>
<!-- thrid team -->
<a href="javascript:;" data-target="#cod_team">
<img src="./img/team_cod.png" alt="Call of Duty"/>
</a>
<div id="cod_team">
<h2>Call of Duty Team Lineup:</h2>
</div>
Related
I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});
I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});
Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>
Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});
document.getElementById("nextOneButton").onclick = function(){
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").visibility="visible";
}
//mainFrameTwo is initially set hidden in terms of visibillity
//nextOneButton is on top of the mainFrameOne in terms of position, when //clicked it should move to next frame. Some what like a slide show
Really you need a button so you can bind your function to the onclick event. Here is a possible solution:
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<div id="mainFrameOne">
<p>mainFrameOne</p>
</div>
<div id="mainFrameTwo" style="display:none;">
<p>mainFrameTwo</p>
</div>
<button onclick="myFunction()">Click me</button>
</body>
</html>
Alternatively, you could use anchor tags to remove the need for the button:
<html>
<head>
<title></title>
<script>
function myFunction() {
document.getElementById("mainFrameOne").style.display="none";
document.getElementById("mainFrameTwo").style.display="block";
}
</script>
</head>
<body>
<a id="mainFrameOne" onclick="myFunction()" href="#">
mainFrameOne
</a>
<a id="mainFrameTwo" href="#" style="display:none;">
mainFrameTwo
</a>
</body>
</html>
<div id ="activeContent" >
<div id ="mainFrameOne"> <!-- POSITION MATTERS WHEN YOU WANT TO DO THE DISSAPEARING ACT WITH JAVASCRIPT -->
<img src="person.gif" id ="person" width="1350" height ="900">
<div id ="backOneButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextOneButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameOneTitleBar">
<h3 id ="jakesLemonade">Jake's Lemonade Stand</h3>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "firstTextJake"> This is Jake, the owner of a small lemonade stand.<br> Like many other small business owners, Jake wants to know <br>what the future holds for him. CloudFin can tell him exactly that. </h3>
</div> <!-- End of MainFrameOne Div-->
<div id ="mainFrameTwo">
<div id ="backTwoButton"> <h4 class ="directionButtonsText"> Back </h4> </div>
<div id ="nextTwoButton"> <h4 class ="directionButtonsText"> Next </h4> </div>
<div id = "mainFrameTwoTitleBar">
<h3 id ="lemsLemons">When life gives you lemons, Make lemonade</h3>
<script type="text/javascript">
</script>
</div> <!-- End of MainFrameTitleBar -->
<h3 id = "secondTextJake"> How much does each lemon cost?</h3>
</div> <!-- End of MainFrameTwo -->
</div> <!-- End of ActiveContent Div -->
If something is not working you can consider using addEventListener.
Example:
document.getElementById('button').addEventListener('click', changeVisibility(), null);
function changeVisibility()
{
document.getElementById('divToHide').style.display = "none";
document.getElementById('divToShow').style.display = "block";
}
i've a problem to toggle only (this) 1 'card'
$('a[rel="toggle_comments"]').click(function(){
var div = $('.comments');
$(div, this).slideToggle('slow');
});
<!-- This is a example code -->
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
[...]
When I clicked at 'toggle_comments', toggle all '.comments' classes, not only that, I have clicked. Anyone have any ideas?
Sorry for my bad english.
I hope you understand what I mean - Thanks :-)
If you want to toggle only the .comments under the <section> tag your link is in, do this:
$('a[rel="toggle_comments"]').click(function(){
// find the closest section tag (parent) and find all child `.comments`
var $comments = $(this).closest('section').find('.comments');
$comments.slideToggle('slow');
});
If you want to toggle all .comments:
$('a[rel="toggle_comments"]').click(function(){
$('.comments').slideToggle('slow');
});
I am trying to get the Meet Some of Our Staff section to only show once the text "Meet Some of Our Staff" is clicked. I have used code that has gotten it to hide the section when "Meet Some of Our Staff" is clicked, but cannot figure out how to reverse it to where it is already hidden upon page load and then appears when "Meet Some of Our Staff" is clicked.
Script:
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
HTML:
<div class="content3">
<div class="title2">
<h1><center><a href="javascript:hideshow(document.getElementById('staff'))">Meet Some
of Our Staff</a></center></h1>
</div>
<div id="staff">
<center>
<ul>
<a href="http://www.instituteforcreativelearners.org/"
onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">
<li>
<img src="images/kami.jpg" alt="...">
<br />
<p><span class="stafftitle">Kami Barron</span> <br /> <span
class="staffsubtitle">Director of Education</span></p>
</li>
</a>
</ul>
</center>
</div>
</div>
Check
Sample - reformatted HTML/JS
Change
if (which.style.display="block")
to
if (which.style.display == "block")
if you are not setting display:none in CSS, then use this
if (!which.style.display || which.style.display == "block")
On what you want to be hidden apply the CSS rule display:none. Then in Javascript,
document.getElementsByTagName("a")[0].addEventListener("click",function(e)
{
document.getElementById("staff").style.display="block";
e.preventDefault()
});
Use CSS to hide the element when the page loads.
<div id="staff" style="display: none;">
That will hide the div until the user clicks on the link.
Edit: Check out this JSFiddle for a working example using your code