I am trying to make sections of page collapsible. No plan to use accordion, but simple hide/show to save screen space. See the sample code below. The first link has to click twice to make the section hide, and the second one works fine. Neglect this issue, if you can suggest a better way to do it.. In this example, div1 is in open position and div2 hidden initially.
thanks,
bsr.
<!doctype html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<a class="toggle" href="#">Hide</a>
<div class="toggle">
<p>First div</p>
</div>
<a class="toggle" href="#">Show</a>
<div class="toggle" style="display: none">
<p>Second div</p>
</div>
<script type="text/javascript">
jQuery().ready(function() {
$("a.toggle").toggle(
function() {
$(this).text("Hide");
$(this).next("div.toggle").show();
},
function() {
$(this).text("Show");
$(this).next("div.toggle").hide();
}
);
});
</script>
</body>
</html>
I would use the toggle() function, as it's not only used to bind toggling events, it also toggles visibility is called without any parameters:
jQuery().ready(function() {
$("a.toggle").click(function(){
var $div = $(this).next("div.toggle");
$div.toggle();
if($div.is(':visible'))
$(this).text('Hide');
else
$(this).text('Show');
});
});
The problem with your code is that you're showing/hiding the elements regardless of their initial state. No matter what you do, if you bind events using toggle(func, func), the first function will always be called first.
The reason the first one needs to be clicked twice is because it starts with the div showing. When you click on it the first time, because of the nature of the toggle event, jQuery thinks that you're trying to show it. But it's already showing. So none of the changes take effect.
You can solve this by having everything start out hidden. But if that's not an option, then you'll have to do away with the toggle event listeners and just listen for clicks:
$('a.toggle').click(function () {
var $this = $(this);
if ($this.text() === 'Show') {
$this.text('Hide').next('div.toggle').show();
} else {
$this.text('Show').next('div.toggle').hide();
}
});
Related
My knowledge of javascript is close to none and I'm trying to have a div be replaced on click by another div.
<div class='replace-on-click'>
<h1>Click to Insert Coin</h1>
<div class='replaced-with'>
<div class='info-text'>
<h1>Title</h1>
<h2>Subtitles</h2>
</div>
<ul class='info-buttons'>
<li><a href='#' class='b1'>Buy Tickets</a></li>
<li><a href='#' class='b2'>Find Hotels</a></li>
</ul>
</div>
</div>
I'd like it so when you click "Click to Insert Coin", that will disappear and make the .replaced-with div take its place, hopefully with some kind of fade transition if possible. How do I go about doing this?
We will make use of jQuery because it helps us to get you desired behavior done in a few statements. So first include jQuery from somewhere in your head part of your HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Then somewhere include this Javascript code (e.g. create index.js and include it the way like the library code).
$(document).ready(function() {
$('h1').click(function() {
$(this).fadeOut(function() {
$('.replaced-with').fadeIn();
});
});
});
It does the following: When your document is ready, it adds an event handler on h1 waiting for clicks. On click, it first fades out the h1 and when it's done, it fades the other element in.
In your HTML document, include the hidden attribute to the object that should be hidden initially.
<div class='replaced-with' hidden>
Here you can find it working as well: http://jsbin.com/cuqoquyeli/edit?html,js,console,output
I have a requirement that when click on a button the page need to reload.after reload i need to show the hidden div.
below is my requirement which describe my problem?
1.In my html code consist of some text along with button and in this page only by default i am hiding some text div
2.when click on the button i am reloading the page .after reload the page i want show hidden div
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test2").css("visibility","hidden");
alert("reloaded");
$("#p1").click(function(){
setTimeout(function(e){
alert("inside time out");
$("#p2").css("visibility","visible");
},3000);
location.reload();
});
});
</script>
</head>
<body>
<div id="myDiv">
<p id="p1">This is sample text</p>
</div>
<div id="test2">
<p id="p2">this is invisible text</p>
</div>
</body>
</html>
Thanks in advance
You can set a localStorage item when a user clicks the button, and on page load look for the localStorage item and conditionally show the hidden div.
var $hidden = $('.hidden');
localStorage.getItem('show') && $hidden.show();
$('button').on('click',function() {
localStorage.setItem('show',true);
window.location.reload(false);
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">hidden</div>
<button>click</button>
First, if your requirement is to have a button be clicked, you'll need a button, not a paragraph.
Next, instead of the visibility property (which still allocates space on the page for the element even when it is not shown), use display (which does not).
Most importantly, if you reload the document, then any local variables you have will be lost. You need to persist some kind of "flag" between page loads. This can be done in a variety of ways (cookies, sessionStorage, localStorage, server-side), but localStorage is probably the simplest.
This code won't actually run, here in the Stack Overflow snippet environment due to sandboxing, but you can see a working version of it here.
See other comments inline:
$(document).ready(function(){
// Check to see if this is a page reload or not by seeing if a value was placed
// into localStorage from a previous page load
if(localStorage.getItem("loadedEarlier")){
// Page has already loaded earlier
$("#test2").css("display","block");
}
$("#btn").click(function(){
location.reload();
});
// Place a value into localStorage
localStorage.setItem("loadedEarlier", "yes")
});
/* No need for JavaScript to initially hide the element which
can cause the usre to see it momentarially before the JS runs.
Set its default display to none instead. */
#test2 { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Click to Reload</button>
<div id="test2"><p id="p2">this is invisible text</p></div>
I made a widget in the summary view of the account module. In this widget i want to use a slideToggle to show some details. Sometimes the code works perfectly but other times it double toggles and instantly closes the details.
JS:
$(document).ready(function() {
$('.potential_single_title').on('click',function(e) {
$(this).parent().find('.potential_comment_list').slideToggle('slow');
});
});
TPL:
<script src="resources/ChildCommentScript.js"></script>
<link rel="stylesheet" type="text/css" href="resources/ChildCommentStyle.css">
{strip}
<div class="potential_comment_container">
{foreach from=$OPP key=K item=POT}
<br />
<div class="potential_single">
<div class="potential_single_title">
<strong>{$POT[1]}</strong> <span class="potential_assignee">Assigned to : {$POT[2]}</span>
</div>
<hr>
<div class="potential_comment_list">
<div class="commentContainer">
{foreach from=$COM[$K] item=POTCOM}
<div class="commentDetails" style="width:100%;">
<div class="span1">
<img class="alignMiddle pull-left" src="layouts/vlayout/skins/images/DefaultUserIcon.png">
</div>
<span class="commentorName"><strong> {$POTCOM[0]}</strong></span>
<span class="pull-right"><p class="muted"><small>{$POTCOM[1]}</small></p></span>
<div class="commentInfoContent">{$POTCOM[2]}</div>
</div>
{/foreach}
</div>
</div>
</div>
{/foreach}
</div>
{/strip}
Usage of slide toggle seems to be correct. I suspect the click is happening twice sometimes which is causing slide again.
Modifying JS to reject clicks if slide action is happening might resolve the issue.
$(document).ready(function() {
var sliding = false;
$('.potential_single_title').on('click',function(e) {
if(sliding) return false;
sliding = true;
$(this).parent().find('.potential_comment_list').slideToggle('slow', function() {sliding = false;});
});
});
Simple flag to reject click action while sliding is included!
This is just to show how to see if the click is happening twice.
$(document).ready(function() {
$('.potential_single_title').on('click',function(e) {
console.log("clicked")
});
});
for one click.. if in console you see clicked twice you can assume your trigger happy ;-)
try also putting a debugger in there... may highlight things
$(document).ready(function() {
$('.potential_single_title').on('click',function(e) {
console.log("clicked");
debugger;
});
});
in chrome the debugger console must be open for it to hit the debugger line.
just want to rule out stupid things.. this is one for one what is on the page no other js... like maybe your wrapping $(document).ready( twice or something and just havnt included that code in the question?
Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>
You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.
I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});
<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.
I recently tried to do toggle on and off for a div, however using many methods, I was not able to do it due to the the link going to .com/#
until I found a post which make it happen without the redirect to #
<script type="text/javascript">
function toggleVisibility(newSection) {
$("#info").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
I am still learning JavaScript and I do not know how to add in toggle off.
now it just toggles on and when i press it it does not toggle off.
Please help.
Toggle does both show and hide, based on the element's current display visibility. So something like this should work:
function toggleVisibility(newSection) {
$("#" + newSection).toggle();
}
What the code you have given does is hide all elements with an ID of info that do not have the ID given in newSection, then shows the newSection one.
Since elements can only have one ID, it's kind of weird and pointless to treat the elements as if they might have more than one, or if there might be more than one of the same.
You could just use the .toggle() method: $("#"+newSection).toggle()
sounds like you may want tabs: when one panel is selected the other panels disappear.
here's one common way to do it:
$('a.tab').click(function(e) {
e.preventDefault();
$('.panel:visible').hide();
var el = $($(this).attr('href'));
el.toggle();
});
you have links that show a particular panel in a group and hide the others:
<style type="text/css">
.panel {display: none;}
</style>
<a class="tab" href="#panel1">Show/hide panel 1</a>
<a class="tab" href="#panel2">Show/hide panel 2</a>
<a class="tab" href="#panel3">Show/hide panel 3</a>
<div class="panel" id="panel1">1</div>
<div class="panel" id="panel2">2</div>
<div class="panel" id="panel3">3</div>