Can someone please help me understand the jQuery code and how it relates to my HTML. The links are going through and hiding all the divs, however I can't figure out why the div isn't showing when it's link is clicked.
HTML:
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>
jQuery:
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
You just need to change one line of your jQuery.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
$(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").show() //added "-div" and changed toggle to show
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="meet-the-team-info">
<div class="conor-div">
<h1>Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm div2</div>
<div class="tracey-div">I'm div3</div>
<div class="frank-div">I'm div4</div>
<div class="rosie-div">I'm div5</div>
</div>
</div>
</div>
</section>
#natels's solution works and deserves to be the accepted answer. But even his solution can be shortened a little bit:
$(function () {
$("a").click(function () {
$(".meet-the-team-info div:visible").hide(); // first hide all visible team divs,
$("."+this.dataset.target+"-div").show(); // then show the chosen one
}).eq(0).click(); // emulate a click on the first link (index=0)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<section class="meet-the-team pt-5 pb-5">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
Link 1
Link 2
Link 3
Link 4
Link 5
Link 6
<div class="meet-the-team-info">
<div class="conor-div">
<h1>I'm Conor</h1>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alternatetext" style="width:100px;">
<p>Hello Hello Hello</p>
</div>
<div class="kyle-div">I'm Kyle</div>
<div class="tracey-div">I'm Tracey</div>
<div class="frank-div">I'm Frank</div>
<div class="gwen-div">I'm Gwen</div>
<div class="rosie-div">I'm Rosie</div>
</div>
</div>
</div>
</section>
The code in this snippet does not need to be adjusted if more divs are to be included in the page. The individual class names do not occur in the code any more.
i think you have an extra hide() there. The first hide(), hides all the divs on page load. But then on click you say "hide" and "toggle". They're canceling each other or doing something unexpected. Try just toggle(). And also you're missing the "div" part in your selector.
$(function () {
$(".kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
$("a").bind("click", function () {
// $(".conor-div, .kyle-div, .tracey-div, .frank-div, .rosie-div").hide();
var target = $(this).data("target");
$("."+target+"-div").toggle();
});
});
Related
I need to make a button that views three consequent posts
when I click "view all" the three "div"s should show up
I need to make the three 'div's show up if I click the view all button
so I am using jquery here
$('.posts .repeat-grid').slice(0, 3).show();
$('#view-all').on('click', function() {
$('.posts .repeat-grid:hidden').slice(0, 1).slideDown();
if ($('.posts .repeat-grid:hidden').length === 0) {
$('#view-all').fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
any idea why it is not working?
You Can Try this if that's what you mean
$('#view-all').on('click', function() {
$('.posts').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.
Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});
I have a page in which there is an anchor tag: jump to div2.
This anchor tag opens tut.html, which has a div with id=div2:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
By default, the contents of div2 are hidden. How can I display or fade in its contents when a user clicks on a hyperlink in another page?
You can easily check the hash that is passed in and use that to display the appropriate block:
window.onload = function(){
var element = document.querySelector(location.hash);
if(element) element.style.display = "block";
}
your href link should not link to the page, just to the anchor :
<a class="myButton" href="#div2">link</a>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
Using jQuery, you should have a function in the bottom of your document which would handle your click like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(function () {
$('a.myButton').on('click', function(event){
event.preventDefault();
$('div2').fadeIn('slow');
return false;
})
});
</script>
If the link goes to a new page:
link
On the bottom of the new page 'tut.html' :
<script>
$(function () {
var hash = window.location.hash;
if(hash == '#div2') $(hash).fadeIn('slow');
});
</script>
Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>
You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.
I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});
Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/
I'm using jQuery to slideToggle some content when the button is clicked. Here's my HTML:
<div class="seasons">
<div class="container text-center">
<div class="row margin-top-medium">
<div class="col-md-12 1">
<div class="season hvr-shrink">12×01 Chi Cerca Trova</div>
<div class="content">
<div class="hvr-shrink">12×01 Chi Cerca Trova</div>
</div>
</div>
<div class="col-md-12">
<div class="season hvr-shrink">12×02 Il Mini Peter</div>
<div class="content">
<div class="hvr-shrink">12×01 Chi Cerca Trova</div>
</div>
</div>
<div class="col-md-12">
<div class="season hvr-shrink">12×03 Un Quagmire per Quagmire</div>
</div>
</div>
</div>
And this is my script:
$(document).ready(function(){
$(".content").hide();
$(".season").click(function(e){
$(this).next().slideToggle("fast");
});
});
Panels open as they should but when one is opened, and I click to open another panel, the previous one doesn't close. Is there any jQuery code for that?
Thanks everyone for the help!
You are using .hide() function when document is ready. You can use same function, when user click a different panel header.
$(document).ready(function(){
$(".content").hide();
$(".season").click(function(e){
var thiz = $(this);
if(!thiz.hasClass("opened")){
$(".content").hide();
thiz.next().slideToggle("fast");
$(".season").removeClass("opened");
thiz.addClass("opened");
}
});
});
You can see a demo: http://codepen.io/ogzhncrt/pen/zGQqwx