hide and show divs using javascript - javascript

I have multiple links in a page. When I click a particular link I want a div which contains the details of that link and hide all other divs associated with other link in the same page
Please find a solution may be using javascript.

http://jqueryui.com/demos/accordion/ would probably be your best bet to accomplish what you are trying to do.

You are looking for an Accordion. The accordion component is available for many popular javascript framwworks. my fav is Mootools Accordion and I am sure there is one for jquery and prototype and what not

Related

How to define dynamic drop-down menu (example).?

I want to re-create the view given in the site under the Base Score Metrics, when I click on it would expand and another click would collapse the details included in it.
I don't think this is native html functionality perhaps I have to use some third party plugin for it. Please tell me know how can I achieve the effect coded in the website given in the example.
Collapsed view
Expanded view
Thanks.
JQuery's UI framework, specifically jqueryui.com/accordion, allows you to do just that.
You can put any elements inside those tabs, and it will work as if it were a static page.

Highlight Active Navigation Menu Item on Active page with CSS/JavaScript, No ids

I am working on a pre-existing website, now this website need to work for partially visible people as well. The requirement is the Active Navigation menu Items should be highlighted on each active page.
The problem is that there is no id's for div and Ul/li tags for the navigation menu.
If there were any ID's i could have created a css and called those to selected. Also I can not modify any HTML code of any page.
Could you please suggest any way to make this work out.
Looking forward for your answer.
Regards,
S
The easiest solution may be looping through all <a>s and comparing window.location.href to the value of their href if you're able to modify the Javascript.
Something like this should work for you: http://jsfiddle.net/a7C8a/3/

Hover over something for information to appear in another

I have been trying to find ways to to hover over something so that more information will appear in a different section. I have been looking at similar questions that were posted but I am still not sure how to do it.
I want "Recently on Sale" to show up first, then as I hover over the others, more information will appear for them respectively. Here is the link to what I have been working on: http://jsfiddle.net/saikirakiva/jVaLd/
I have been using just css, is javascript more suitable for what I am trying to do?
Thank you!
JavaScript is useful because it allows you to delay hiding the second element when the mouse moves away from the first element. This feature is especially important in nested drop down menus, because users frequently leave a menu item for a short time while navigating to its submenu.
you can do it like this: http://jsfiddle.net/mnbayazit/Vhg6p/9/

How to make popup help/info message?

How do show pop up help messages in jquery?
I.e You might want to let the user know about a new feature, or might want to provide the user with help on how to use a feature.
Your best bet to get started would be the jQuery Dialog which is part of jQuery UI. That can give you basic message abilities
You could use a popup lightbox plugin, there are plenty available, but I'd recommend FancyBox because it's flexible, easy to use, and looks quite professional. You can them to display any content, including simple text, buttons, forms, iframes and images.
Have a div element hidden. Position is absolute, z-index to something greater than 0 (css).
Onclick on some button or something, have javascript change the display of this element to block.

Javascript slide down menu

I'm trying to find something similar to the 'Table of Contents' drop down at the top located at http://codeigniter.com/user_guide/ but for jQuery. It looks like that site uses the moo tools fx library. Does anyone know of an already existing plugin for jQuery that does the same thing or easy javascript code to accomplish the same sliding effect for that menu?
It's right there in the core; http://api.jquery.com/slideDown/ . Just call that function in a link's onclick event and you should be good to go.
$('a.expand').click(function() {
$('#toc').slideToggle(); // slide up if down, down if up.
});
To achieve that exact effect you'll just have to use the slideToggle() function built into jQuery.
$('#toggleButton').click(function(){
$('#tableOfContents').slideToggle();
});
You'll need to wrap the table of contents in and have a link/button/whatever width id="toggleButton" to activate it. Make sure the button is outside the table of contents though!
You can check out this links -
http://www.webresourcesdepot.com/sliding-top-menu-with-jquery/
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/
You can even google out for more. There are many of them available.
You can use the jQuery .slideDown() and .slideUp methods.
http://api.jquery.com/slideDown/
However something as big as that menu you probably want to call in on the fly with ajax with the callback function on slideDown.
Edit : The reason I recommend calling in the menu with AJAX is because of the usability/accessibility issue cause by having around 100 links off screen that a keyboard user can still tab through. It would take ages for a keyboard user to tab through all the off screen links to finally come to the "Table of Contents" link that activates the menu and then to shift tab back to the one he/she wants...terrible. The menu already does not work with JS off. (There is a link to the Table of Contents page below instead). Therefore calling the menu in with AJAX and giving the first link of the menu focus() is a much better solution.
Yep, it's mootools Fx.Slide. In jQuery you should use slideDown (http://api.jquery.com/slideDown/)

Categories