Still a noob when it comes to this part of programming. I have a question regarading something I "solved" with the toggle function. I have 3 buttons ( placed in different divs on the page, so it's not a tab toggle ). What I try to achieve is when I have a button active and I click on another one, I want the active one to be closed. I looked up some jfiddle posts here with something similar, tried to implement it to the page and figure it out myself but nothing worked for me so far. The function I currently use for one button is
<script type="text/javascript">
$(function() {
$('#toggle5').click(function() {
$('.infotext').fadeToggle('fast');
return false;
});
});
</script>
It works just fine for one button to close and open it, but I have no idea where to start when I want two more buttons and let them interact with each other as mentioned before. Anybody has an idea how to do that ? And is the toggle function even the right function here ? I'd like to thank in advance for what ever answer I get here, great community.
Here is a good fiddle.
$("a").click(function(e) {
var tClass = $(this).attr("id"),
content = $("div.content." + tClass),
link = $(this);
$("div.content:not('." + tClass + "')").fadeOut("fast");
$("a").not(link).text("Open");
content.fadeToggle("fast", function() {
link.hide().text((content.is(":visible") ? "Close" : "Open")).fadeIn("fast");
});
e.preventDefault();
});
If by closed you mean disabled then the code block bellow will do the trick.
Also, this will work only if your buttons are submit or button type.
<script type="text/javascript">
$(function() {
// click event for the #toggle5 button
$('#toggle5').click(function() {
// check if the #toggle6 is disabled
if ( !$('#toggle6').is(':disabled')) {
// if is not disabled, then disabled it
$('#toggle6').attr("disabled", "disabled");
}
return false;
});
});
</script>
If your buttons are links you will need to fire the preventDefault event
Docs here: http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
<script type="text/javascript">
$(function() {
// click event for the #toggle5 button
$('#toggle5').click(function() {
$('#toggle6').on("click",function(e){
// check if we hire the preventDefault event already
if(!e.isDefaultPrevented()
e.preventDefault();
});
return false;
});
});
</script>
This will allow multiple toggle elements. Click toggle first one to open. Click to open the second one and it will close the first one and then open the 2nd one. So forth and so on. Can also close toggles with a click without having to open another one.
The HTML Markup
<div class="toggle">See Stuff</div>
<div class="paragraph">
<p>Content</p>
<p>Content</p>
<p>Video</p>
<p>Image</p>
</div>
The jQuery
<script>
$('.paragraph').hide();
$('.toggle').click(function() {
var panel = $(this).next()
$('.paragraph').not(panel).slideUp();
panel.slideToggle({
direction: "down"
}, 1000);
});
</script>
Related
I have a very difficult client that is demanding that a jquery toggle closes when a user scrolls down the page, rather than automatically staying open / closing when a user collapses it...
would that be possible? My jquery is pretty simple...
$(document).ready(function() {
$('.nav-toggle2').click(function() {
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function() {
if ($(this).css('display') == 'none') {
//change the button label to be 'Show'
toggle_switch.html('Contact Us');
} else {
//change the button label to be 'Hide'
toggle_switch.html('Contact Us <');
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tag href="#contactus" class="nav-toggle2">Contact Us <</tag>
<div id="contactus">some content that hides/shows here</div>
I can get around in jquery but am a little naive when it somes to integrating new effects into it.... would it be possible to have toggle_switch.html on scroll so when a user gets maybe 1/3 the page down, it hides?
Based on your comments you said you haven't tried listening to the scroll event. Can you try that?
It will be something like this (code not tested):
$(window).on("scroll", function(){
// you can replace this with your hiding toggle logic
$('.nav-toggle2').toggle('false');
});
You may want to unbind the event from the window later to avoid memory leak.
Reference about scroll: Jquery scroll api
I am using toggle class for dd & dt it is working fine but my problem is if user click out side i want to close that toggle. How to achive this ?
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
jQuery=$.noConflict();
jQuery(document).ready(function() {
jQuery('.navigation dd').hide();
jQuery('.navigation dt').click(function(){
jQuery(this).next('dd').slideToggle('slow');
jQuery(this).toggleClass('glace_navigationlayer-collapsed');
});
});
</script>
You can also try -- what DBS has is proper, ( he posted in a comment ), imho.
//clicking on the body, closes the toggleitem
jQuery(document.body).bind('click.closedd', function() {
jQuery('.navigation dd').hide();
});
// clicking on the toggle item, won't trigger the click on the body
// that we set up above.
jQuery('.navigation dd').bind('click.closedd', function(e) {
e.stopPropagation();
});
You need to listen for clicks on the <body> and then check to make sure the target is outside of the navigation component.
jQuery('body').on('click', function(evt) {
var $target = $(evt.target);
if ( !$target.closest('.navigation').length ) {
// code to collpase the nav menu
}
});
I would also recommend refactoring your nav code to use separate expand and collapse functions instead of relying on slideToggle and toggleClass.
Good luck!
Not too sure about the requirements, but you can try achieving the above on mouseenter and mouseleave events.
However, if you have to implement the above functionality only on click, then you will have to wire the click event on a container that covers the entire html body.
Codepen is here
I have two triggers on an image. General behaviour:
When I click a trigger, it should reveal a small context box (got this working)
When I click outside of the context box OR the trigger, it should disappear (got this working)
When I click another trigger, if there is another trigger/context box that is already active/open, it should close the other one and open the recently click one (not working)
Here's the html:
<span class='pulse-button' id="button-1"></span>
<div class="content-box context-closed tabs" id="tabs1">
</div>
Here's my jQuery:
$(function(){
$(".pulse-button").click(function(e){
e.stopPropagation();
if( $(".pulse-button").not(this).hasClass("pulse-button-active")){
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}else{
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
};
});
$("body").click(function(evt){
if(evt.target.class == "content-box")
return;
if($(evt.target).closest('.content-box').length)
return;
if( $(".pulse-button").hasClass("pulse-button-active")){
$(".pulse-button").removeClass("pulse-button-active");
$(".pulse-button").next().addClass("context-closed");
};
});
$( "#tabs1,#tabs2" ).tabs();
});
What could I be doing wrong here?
You don't need the else in your .pulse-button click. Because the code in else block should be executed either any .pulse-button has class pulse-button-active or not. Change the your click event like following.
$(".pulse-button").click(function(e){
e.stopPropagation();
if($(".pulse-button").not(this).hasClass("pulse-button-active")) {
$(".pulse-button").not(this).removeClass("pulse-button-active");
$(".pulse-button").not(this).next().addClass("context-closed");
}
$(this).addClass("pulse-button-active");
$(this).next().removeClass("context-closed");
});
UPDATED PEN
I've got a page with 2 buttons and 2 divs which are hidden.
When you click the first button the first div should appear, and if you click the second button the second div should appear.
I've managed to get that to work, but what I can't get to work is, that if I have the first div open, and click the second button, I would like it to show the second div and close the first div.
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("vis");
$(".hg_facebook").toggleClass("skjul");
});
});
$(document).ready(function() {
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("vis");
$(".hh_facebook").toggleClass("skjul");
});
});
Here is my fiddle:
http://jsfiddle.net/4mWLk/4/
Best regards
Martin
your js code is a bit incorrect.
You call twice $(document).ready(function() { ... Is enough once time.
try this:
$(function(){
$("button.hh").on("click", function(){
$(".hh_facebook").show();
$(".hg_facebook").hide();
});
$("button.hg").on("click", function(){
$(".hh_facebook").hide();
$(".hg_facebook").show();
});
});
see the updated fiddle: http://jsfiddle.net/4mWLk/5/
update if you want to hide div after clicking on same button: http://jsfiddle.net/4mWLk/8/
Use toggle instead of show (for your comment at my answer)
PS: I updated CSS because there was not neccessary.
If you want it with classes so you can have more control over the effect in case you decide to change it later, you should do it like this:
http://jsfiddle.net/4mWLk/7/
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("skjul vis");
$(".hg_facebook").removeClass("vis").addClass("skjul");
});
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("skjul vis");
$(".hh_facebook").removeClass("vis").addClass("skjul");
});
});
Html:
<div class="hh_facebook skjul">test1</div>
<div class="hg_facebook skjul">test2</div>
What it does is like this:
first the divs start with skjul class so they are in hidden state.
when a button is pressed, toggle both the skjul and vis classes (one is removed, the other is added)
make sure the second div is hidden.
What is the best way to hide all links except for one in javascript? (jquery is okay)
Say I have the following:
<div id="choices">
<div><a href="#">A<></div>
<div>B</div>
<div>C</div>
</div>
I want to make it such that if a user clicks link A, B, or C, the div's that do not contain the one that was selected disappear and the choice selected pops up in an alert box. Upon clicking on a reset button, all the divs appear again as normal.
Example: User clicks A, results in B and C divs hiding. User kicks Reset button and all show up again.
How do I accomplish this?
NOTE: I have been assigning IDs to each of the A, B, C divs respectively and made a function where when the user clicks B, it calls a $(divnotclicked).hide() for the ones I want to hide. And for the reset button I just do .show() for each of them $(A).show(), $(b) $.show()(C).show().... but theres gotta be a way to do with without me assigning IDs to each of them. Im looking for the best way to do it.
Im looking for the best way to do this, preferably without manually calling functions for each of them or assigning IDs to each div within the "choices" div. Or having to call on each individual div to ".show" upon clicking the Reset button.
With jQuery, it's quite simple:
$('#choices div').click(function() { $(this).siblings().hide(); });
$('#resetButton').click(function() { $('#choices div').show(); });
Also, here is a jsFiddle with this code in action. In general, jsFiddle is an excelent tool when you need to play with jQuery (or other frameworks, for that matter).
Just get all links and remove the one that was clicked using the not method:
$('#choices a').click(function(e){
e.preventDefault(); // stop the click from activating the link
$('#choises a').not(this).parents().hide();
// do something with the chosen link
});
$('#reset').click(function(){
$('#choices a').parents().show();
});
give each link its individual id. and add the same class to all of them For example:
<a class="mylinks" id="link01" href="someURL">friendly text</a>
then, when someone clicks on one of your buttons, set the css-visibility of the class to hidden, and then set the visibility of the id that belongs to the button to visible again.
Here's how I would do it:
$('#choices a').click(function() {
$(this).parent().siblings().hide();
});
And for the reset:
$('#resetButton').click(function() {
$('#choices div').show();
});
Here's a working example: http://jsfiddle.net/W9Sym/
with:
<div id="choices">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<button>Reset</button>
to hide the containing divs of those not selected and have the reset show them, here's a demo
$(function() {
$('#choices').on('click', 'a', function() { //bind click handler to choices, for links
$(this).parent().siblings().hide(); //find the others and hide them
});
$('button').on('click', function() { //bind click to button
$('#choices > *').show(); //show all children of choices
});
});
You can try doing this:
HTML
<div id='A'>Hi, I'm A</div>
<div id='B'>Hello</div>
<div id='C'>Aaargh!</div>
<a href='#A'>A</a>
<a href='#B'>B</a>
<a href='#C'>C</a>
<button type='reset'>Reset</button>
jQuery
$('a').click( function() {
var show = $(this).attr('href');
$('div').each( function(e) {
$(this).not(show).hide();
});
e.preventDefault();
});
$('button').click( function() {
$('div').show();
});
Kind of verbose, but it should get the job done.