I am still learning JavaScript/jQuery and I'm trying to open and close divs with the least amount of verbiage, I'm trying to break free of the habit of repeating myself because its easier to code.
$(document).ready(function() {
$(function () {
$('#section-two, #section-three').css('display', 'none');
$('.section-opener').function (e) {
e.preventDefault();
var target = $(this).data("target");
var $target = $(target);
$('.section').not($target).stop(true, true).css('display', 'none');
$target.stop(true, true).css('display', 'block');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Section One</h4>
<div class="section" id="section-one">
<p>I am inside section one</p>
</div>
<h4>Section Two</h4>
<div class="section" id="section-two">
<p>I am inside section two</p>
</div>
<h4>Section Three</h4>
<div class="section" id="section-three">
<p>I am inside section three</p>
</div>
I'm not having any luck as currently none of it is working.
Your code is very confusing and it looks incorrect as well.
When you mention closing and opening it seems like you mean show and hide instead of what is normally considered "closing", i.e. </div>
Also, it appears you are using JavaScript to set the initial display where you should be using CSS:
<style>
#section-two, #section-three{
display: none;
}
</style>
Your .stop() and .function() and target, $target all serve to make your code very difficult to understand. I suggest reading some tutorials to understand the basics, because it appears you do not understand the code you're writing.
Also, perhaps you are looking for $().show() and $().hide() functions? Those perform the display:block and display:none shortcuts.
I created a jsfiddle which does what I think you wanted:
http://jsfiddle.net/48xuvL6y/1/
JS:
$(document).ready(function () {
$('.section-opener').on('click', function (e) {
e.preventDefault();
var target = $(this).data("target");
$('.section').hide();
$(target).show();
});
});
CSS:
.section {
display: none;
}
Related
Have a fairly simple show/hide script for a set of data filters from a button. I've been looking at solutions on how to animate the transition but can't seem to see how this script differs from what's described on the jQuery site.
I read somewhere else that CSS3 animations might be easier or better but that also remains a mystery to me.
Is there an easy modification to this script:
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
Instead of changing the classes, you can use the built-in toggleX methods (eg toggle() and slideToggle()).
If you want to do something more fancy such as animating colours, you'll need to look at the animate method and possibly including jquery-ui, which is where css3 transitions may be easier / less overhead unless you're already including jquery-ui.
$("#toggle").click(function() {
$("#target").toggle(500);
});
$("#slide").click(function() {
$("#target").slideToggle(500);
});
Basic fiddle: https://jsfiddle.net/t2j03v6d/
$('.target').on( 'click', function () {
var $stuff = $(this).find('.stuff');
if ( $stuff.is(':visible') ) {
$stuff.slideUp('slow');
} else {
$stuff.slideDown('slow');
}
});
.target .stuff {
display: none;
height: 400px;
background-color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="target">
Show/Hide
<div class="stuff"></div>
</li>
</ul>
I'm not sure what animation you're looking for but here I've used slideToggle() (http://api.jquery.com/slidetoggle/) using some of the code you've provided: https://jsfiddle.net/8gavvmnL/1/
HTML:
<a class="toggle" href="#pop">Click Me</a>
<div id="pop">
I'm hidden until the button is clicked!
</div>
jQuery:
$("#pop").hide();
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).slideToggle();
});
I have read probably 50 articles that say how to hide or show div's depend on a click action. However, I have tried almost every approach and my div's do not hide or show. Seems likely I am missing something very basic.
<script>
$(document).ready(function(){
$('buynav').on('click',function(){
document.getElementById('buycontent').style.display = 'block';
document.getElementById('sellcontent').style.display = 'none';
});
$('sellnav').on('click',function(){
document.getElementById('buycontent').style.display = 'none';
document.getElementById('sellcontent').style.display = 'block';
});
});
</script>
<div id="contentContainer">
<div id="documentSpace" style="left: 50%; top: 50px">
<div id="headerPhoto" style="position:absolute;left:2.5%;width:95%; height:200px; background-image:url('../images/jpgHeader4.jpg'); background-size:cover;background-position:center; background-repeat:no-repeat;border-radius:9px; margin-top:17px;">
</div>
<div id="secondNav" style="position:absolute;left:2.5%;width:95%;height:75px;top:250px;text-align:center;vertical-align:middle;">
<div id="buynav" class="buynav"><h2>Buy</h2></div>
<div id="sellnav" class="sellnav"><h2>Sell</h2></div>
</div>
<div id="sellcontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:none;">
</div>
<div id="buycontent" style="position:absolute;left:2.5%;width:95%;height:100%;top:350px;display:block">
</div>
</div>
</div>
Use jQuerys show() and hide() as such:
<script>
$(document).ready(function(){
$('#buynav').on('click',function(){
$('#buynav').show();
$('#sellnav').hide();
});
$('#sellnav').on('click',function(){
$('#buynav').hide();
$('#sellnav').show();
});
});
</script>
Another option is to use jQuery's toggle(), but it requires you to have hidden one element before using it.
<script>
$(document).ready(function(){
$('#buynav').on('click',function(){
$('#buynav').toggle();
$('#sellnav').toggle();
});
$('#sellnav').on('click',function(){
$('#buynav').toggle();
$('#sellnav').toggle();
});
});
</script>
Also I added # in the $('#buynav') and other JS selectors. And, as #mdesdev, pointed out you can replace the document.getElementById('buycontent') with $('#buynav') and $('#sellnav') as they seem to "exist" within your jQuery scope.
I think you have forget to put # for your id.
$('#buynav, #sellnav').on('click',function(){
$('#buycontent').toggle();
$('#sellcontent').toggle();
});
Hope it works
I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}
The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword
How would I make this jQuery shorter? I assume there must be a better way of working than this!?
(bare in mind I am new to jQuery)...
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
Any help or directions would be greatt as I am down to the last step on this site and want it finished :)
You could use some extra data attribute and an extra class on your links to make it a little shorter.
So let's say your html looks like this:
<div id="white">white</div>
<div id="v2black">v2black</div>
<div id="v3black">v3black</div>
<div id="firstpagename" class="toggle" data-for="white">toggle white</div>
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div>
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div>
then your jquery can rewritten like this:
jQuery(function() {
$('.toggle').on('click', function() {
var id = $(this).attr('data-for');
$('#' + id).toggle();
});
});
So it looks like we're trying to recreate standard "accordion" behaviour. Depending on the layout of your page, it can be helpful to encapsulate your items if possible. Here is one possible solution to make things that open and close. jsFiddle
<div id="white" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v2black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v3black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<script>
jQuery(".tab").on("click", function() {
$(this).closest('.panel').find('.content').toggle();
});
</script>
First we condensed the code into one script tag and one document ready statement, since having it in 3 pieces was only adding bloat.
Then I made sure to chose $ as the parameter for the doc ready callback. jQuery will kindly pass it one argument jQuery so inside our code block we can safely use $ even if outside our code-block it was reserved for other purposes.
Here the .tabs control their .content by traversing up to the nearest .panel and back down. In this way the same behaviour can control all 3.
If however your "tabs" can't be encapsulated like this you can always associate them to the content they are to show/hide in another way. We'll just need to see your html.
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
for the start. If you have many more elements, you might want to loop through a buttonid<>toggleid map:
var map = {
"white": "firstpagename",
"v2black": "secondpagename",
...
};
for (var toggler in map)
makeToggle(toggler, map[toggler]);
function makeToggle(togglerid, pageid) {
var page = $(document.getElementById(pageid)).hide();
$(document.getElementById(togglerid)).click(function() {
page.toggle();
});
}
I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
$(".inner p:gt(2)").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner p:gt(2)').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner p:gt(2)').slideUp(1000);
$(this).text("More info");
}
);
});
</script>
HTML/.NET Coding
<div class="slideContent">
<div class="inner">
<energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
</div>
</div>
<div class="clear-me"></div>
<div class="btnMoreInfo">
<a class="moreInfoLink" href="javascript:;">More Information</a>
</div>
Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
var content = $('.inner p:gt(2)'); // storing selection
content.hide(0);
$('a.moreInfoLink').toggle(
function () {
content.slideDown(1000);
$(this).text("Less info");
},
function () {
content.slideUp(1000);
$(this).text("More info");
}
);
});
</script>
The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.
For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:
<div class="slideContent">
<div class="inner">
<p>Something</p>
<p>Something</p>
<div class="fullInfo">
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</div>
</div>
<div class="btnMoreInfo">
<a class="moreInfoLink">More Information</a>
</div>
And JS like:
$(".inner .fullInfo").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner .fullInfo').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner .fullInfo').slideUp(1000);
$(this).text("More info");
}
);
This way, the browser is only animating one element at a time - much faster!