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.
Related
I am working on a project where the most bad thing is that I can't edit HTML code of my project. I can only edit CSS/JavaScript. My project is that I have a list of menu using <ul><li>... having sub-list also in it. The full HTML code is giving below...
<ul class="main_list">
<li class="parent">
Menu-1
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
<li>Menu-2</li>
<li>Menu-3</li>
<li>Menu-4</li>
<li class="parent">
Menu-5
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
</ul>
This is the HTML code that I can not edit. I can only edit or add CSS/JavaScript. Here I want to hide all children menus and will show on click of there parent menu. But when we click on there parent menu then it goes to the external link that is on parent menu. So is there any way or solution for this...???
Update:
Keep in mind that I also want the parent menu link working too. I have an idea to add some text in front to parent menu like show/hide and make some JavaScript to open its children menu and in this case parent menu link will also work if we will click on it directly. Now can we add some text/icon in front of parent menu using JavaScript as I can't edit HTML?
Your click-function:
$('.main_list .parent > a').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href'); // save the href for further use
$(this).siblings('.children').show(); //or whatever show-function you want to use
window.location.href = href; //if you want to user to be redirected
//OR
window.open(href,'_blank'); //for opening a new tab
});
For your second request, you can do somethin like that:
$(document).ready(function{
$('.main_list .parent').prepend('<span class="show">Show</span>');
});
then your selector in the click-handler above would be:
$('.show')
Demo
Cach your parent click event via JavaScript, then use event.preventDefault() to stop redirecting, then u can make some logic to show/hide menu items.
$(document).ready(function(){
$.each('.parent', function(){
$(this).prepend('<div class="clickableBox"></div>');
})
$(document).on('click', '.clickableBox', function(event){
//show/hide logic here
})
})
Based off of my comment above...
Append a drop down arrow next to the menu item for items with children - clicks on the parent item would navigate to it's link but clicks on the arrow would open up the submenu
JSfiddle DEMO
CSS:
ul.children {
display: none;
}
JQUERY:
$(function(){
$('li.parent').each(function(){
$(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
});
$('li.parent img').on("click",function(){
$(this).siblings('ul.children').toggle();
});
});
EDITED JQUERY (with arrow image toggle):
$('li.parent img').on("click",function(){
if($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).attr('src','Arrow-down.png');
} else {
$(this).addClass('open');
$(this).attr('src','Arrow-up.png');
}
$(this).siblings('ul.children').toggle();
});
Updated DEMO
Since I can't see the full HTML, I'm acting like main_list is the only one.
// Get all anchors in menu
var anchors = document.getElementsByClassName('main_list')[0].getElementsByTagName('a');
// Change HREF to do nothing
for(a in anchors){
a.href = "javascript:void(0);
}
// Do other stuff
Make that code run at the end of the page after everything has loaded. Changing the href to javascript:void(0) will make there be no action.
The below works for me :)
jQuery(function( $ ){
$(document).ready(function(){
$('.main_list a').click(function (e) {
if ($(this).parent().children('ul').is(':visible') != true) {
$(this).parent().children('ul').show();
e.preventDefault();
return false;
}
})
});
});
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.
I am using jQuery to dynamically add elements every time a user clicks a link (".add-event"). Also included in this element is a icon to remove the entire element if the user chooses. I want to hide or disable this remove icon if the element is the last left on the page. This is what I have tried so far:
$(document).on('click','.close_box2:only-child',function(){
event.preventDefault();
});
AND
if( $('.event').length===1) {
$('.close_box2').hide()
}
HTML:
<div class="event">
<span class="close_box2"><i class="icon-remove"></i></span>
<span class="add-event">Add Event</span>
</div>
What am I doing wrong!? Thanks
JSFiddle: http://jsfiddle.net/TrueBlueAussie/KPY9r/6/
You just want to check for the "last one" inside the delete handler:
// initial hide of sole close button
$('.close_box2').hide();
// On add, clone the template and show all close buttons
$(document).on('click', '.add-event', function () {
// Create a new event based on the template
$('#events').append($('#template').html());
// Show all close buttons (as we must now have > 1 event)
$('.close_box2').show();
});
$(document).on('click', '.close_box2', function (e) {
$(this).closest('.event').remove();
// Is there only one left?
if ($('.event').length === 1) {
// Hide the close box on the last event
$('.close_box2').hide()
}
});
Notes:
I use a dummy <script> element to hold you HTML template. This is better than cloning an element on the page and much better than inline HTML strings in your code.
The following looks better regarding performance:
$('.close_box2:only-child').on('click', function(event){
event.preventDefault();
});
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>
I'm trying to write a function in jQuery that will add a class to a selected link (which opens a page in an iframe) then remove that class when another link is selected. I received some help from another member here before for a similar type of thing, but that involved radio buttons and tables.
I tried playing with it for awhile, but jQuery is still pretty new to me so I don't know a whole lot about it.
Basically, I have about 3-4 groups of links contained in <div id="CollapsiblePanelContent"> ... </div> and I would like to add a style to the <a> tag within this container that the user selected.
Any help would be greatly appreciated. Thank you.
<div id="CollapsiblePanelContent">
Link1
Link2
Link3
Link4
</div>
<script type='text/javascript'>
$(function() {
$('div').click(function(event) {
$(this).closest('.CollapsiblePanelContent').addClass('selected').parent().siblings().each(function() {
$(this).find('.CollapsiblePanelContent').removeClass('selected');
});
});
});
</script>
$('#CollapsiblePanelContent a').on('click', function(e){
e.preventDefault(); // prevent page reload, you may remove it if don't need
$(this).addClass('selected').siblings().removeClass('selected');
});
As CollapsiblePanelContent is id so correct selector will be #CollapsiblePanelContent not .CollapsiblePanelContent.
But if you use CollapsiblePanelContent for multiple divs then instead of id it should be class with selector .CollapsiblePanelContent. Because multiple elements can have same id.
You can try :
function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}
Based on the HTML you've provided the following should work:
$(function() {
$('.CollapsiblePanelContent a').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
That binds the click event handler to any <a> elements inside <div class="CollapsiblePanelContent">, which adds the selected class to the clicked link, and removes the same class from all of its siblings.