I have a simple menu bar for displaying a couple different menus. When I click the first one the image comes up, but when I click the 2nd I need the 1st one to disappear and the 2nd appear in its place.
What happens right now is I click "Main Menu" and it opens, but then I need to click it again to close it.
<div class='rmm' data-menu-style = "graphite" data-menu-title = "Menu">
<ul>
<li>Main Menu Show</li>
<li>Gluten Friendly</li>
<li>Kids Menu</li>
</ul>
</div>
<div id="main_menu" style="display:none;"><a href="http://xxxxxx"></div>
<div id="gluten_friendly" style="display:none;"><a href="http://xxxxx"></div>
<div id="kids_menu" style="display:none;"><a href="http://xxxxx"></div>
=====Javascript
<script type="text/javascript">
function hideshow(temp){
var menu = document.getElementById(temp);
if (menu.style.display=="block")
menu.style.display="none"
else
menu.style.display="block"
return false;
}
</script>
I've updated the code from Sid, which works a little better than what I had, but when I click "Main Menu" it opens and I still need to click it again to close, but also when I click "Kids Menu" that one opens right below the "Main Menu".
I know I'm getting close, haha, ughh.
This is part of my Company Website so I don't really want to post the link in public, but if someone can help me please shoot me an email and I will send you the live link so you can see what I'm dealing with. It would be greatly appreciated and I'll gladly make note of the help here on the forum.
seansugden#britishbeer.com
The following may not be the best solution but works OK for me.
HTML
<div class='rmm' data-menu-style = "graphite" data-menu-title = "Menu" >
<ul>
<li>Main Menu Show</li>
<li>Gluten Friendly</li>
<li>Kids Menu</li>
<li>Desserts</li>
</ul>
</div>
<div id="main_menu"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="gluten_friendly"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="kids_menu"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
<div id="desserts"><a href="http://xxxxxxx"><img src="http://xxxxxx" height="650" width="650"></div>
JavaScript
function hideshow(temp){
var menu = temp.id;
if (menu == "main_menu") {
document.getElementById('main_menu').style.display="block";
}
else
{
document.getElementById('main_menu').style.display="none";
}
if (menu == "gluten_friendly") {
document.getElementById('gluten_friendly').style.display="block";
}
else
{
document.getElementById('gluten_friendly').style.display="none";
}
if (menu == "kids_menu") {
document.getElementById('kids_menu').style.display="block";
}
else
{
document.getElementById('kids_menu').style.display="none";
}
if (menu == "desserts") {
document.getElementById('desserts').style.display="block";
}
else
{
document.getElementById('desserts').style.display="none";
}
}
Demo
Try using underscores _ or dashes - instead of spaces for the id attributes. As Brett said in his comment, the ones with spaces are invalid.
As for hiding them all, you can give the divs a common class
<div class="image" id="main-menu"> ... </div>
and use document.getElementsByClassName('class-name') to retrieve an array to loop over and hide (before showing the selected one).
var divs = document.getElementsByClassName('image');
for(var i in divs){
div.style.display = 'none';
}
I do something similar on my website. You need to give them all a class and do the following when one is clicked:
$('#desserts').click(function(){
$('.menus').hide();
$('#desserts').show();
});
When you click desserts, first all menus are closed, then desserts is opened. I don't completely understand what you want to show and hide but I'm sure you'll be able to adapt it.
Related
Excuse me for I am a javascript beginner and I need some help with a task which is probably really banal, although I've searched for a solution here and didn't find any that I could apply to my case.
I have three buttons. When clicked, each slide-opens a div layer and loads content from an external html file into it.
The problem is that after you click one of them, when you click the next one, it first collapses the div, before loading the content. What I would want is for it to simply change the content of the div, if the div is already open. If not, then to open it first.
And I still want it to be toggle-able, in a way that if you click the same link twice, it closes.
I don't know if I am explaining this correctly so here is a pen, hopefully you will see what I mean:
https://codepen.io/tinat/pen/MvjpJW
HTML:
<a id="first" href="javascript:void;">
First
</a>
<a id="second" href="javascript:void;">
Second
</a>
<a id="third" href="javascript:void;">
Third
</a>
<div id="description">
</div>
JS:
$("#first").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description1");
});
$("#second").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description2");
});
$("#third").click(function(){
$("#description").slideToggle("slow");
$("#description").load("https://codepen.io/tinat/pen/PKGpQy.html #description3");
});
Thanks for any help in advance!
Try add active class to recognize current active tab, and you can check active to determine show content or slide it up.
html
<a class="listen" id="first" href="https://codepen.io/tinat/pen/PKGpQy.html #description1">
First
</a>
<a class="listen" id="second" href="https://codepen.io/tinat/pen/PKGpQy.html #description2">
Second
</a>
<a class="listen" id="third" href="https://codepen.io/tinat/pen/PKGpQy.html #description3">
Third
</a>
<div id="description">
</div>
js
$(".listen").click(function(){
if(!$(this).hasClass("active")){
$(this).addClass("active");
$("#description").slideDown("slow");
$(this).siblings(".listen").removeClass("active");
$("#description").load($(this).attr("href"));
} else {
$(this).removeClass("active");
$("#description").slideUp("slow");
}
return false;
});
https://jsfiddle.net/zt11vkz6/
Updated CodePen here.
You will have to keep track of the active tab if the same HTML element is going to be used for each "description". Here I've used the variable tabId to track this state and created a function onClick to prevent repeating code for each tab.
var tabId = null;
function onClick(id, url) {
if (tabId == id) {
// We've must have clicked again on the active
// tab so close description
$("#description").slideToggle("slow");
tabId = null;
} else {
$("#description").load(url);
if (tabId == null) {
// There is no active tab so open description
$("#description").slideToggle("slow");
}
tabId = id;
}
}
$("#first").click(function(){
onClick(1, "https://codepen.io/tinat/pen/PKGpQy.html #description1");
});
$("#second").click(function(){
onClick(2, "https://codepen.io/tinat/pen/PKGpQy.html #description2");
});
$("#third").click(function(){
onClick(3, "https://codepen.io/tinat/pen/PKGpQy.html #description3");
});
I am complete beginner in javascript, I don't know many commands. The thing is I want to show that three different div element in the same exact position while clicking three different button meaning each three button have their own separate dropdown. So I check if some other dropdown is showing when I click to open some other dropdown, then I close the previous opened dropdown so both thing don't overlap. Is this efficient way to do so ?
HTML Snippet-
<header class="primary-header">
<div class="big-wrapper">
<div class="first-icon left col-1-3 ">
<img onclick="toggleDropdown("dropOne");" class="cursor-pointer dropbtn " src="assets/images/icon.32x32.user.white.png" alt="menu-nav">
<div id="dropOne" class="dropdown-content big-wrapper">
First Drop menu 1
First Drop menu 2
First Drop menu 3
</div>
</div>
<div class= "second-icon left col-1-3">
<img onclick="toggleDropdown("dropTwo")" class="cursor-pointer dropbtn" src="assets/images/icon.32x32.hearts.white.png">
<div id="dropTwo" class="dropdown-content big-wrapper">
Second Drop menu 1
Second Drop menu 2
Second Dropmenu 3
</div>
</div>
<div class=" third-icon left col-1-3">
<img onclick="toggleDropdown("dropThree")" class="cursor-pointer dropbtn" src="assets/images/icon.32x32.menu.white.png">
<div id="dropThree" class="dropdown-content big-wrapper">
Third Drop menu 1
Third Drop menu 2
Third Drop menu 3
</div>
</div>
<div class="clr"></div>
</div>
</header>
Javascript-
var dropdown1 = document.getElementById("dropOne");
var dropdown2 = document.getElementById("dropTwo");
var dropdown3 = document.getElementById("dropThree");
function toggleDropdown(elementId) {
if(elementId == "dropOne")
{
dropdown1.classList.toggle("show");
if(dropdown2.classList.contains("show"))
{
dropdown2.classList.toggle("show");
}
if(dropdown3.classList.contains("show"))
{
dropdown3.classList.toggle("show");
}
}
else if(elementId == "dropTwo")
{
dropdown2.classList.toggle("show");
if(dropdown1.classList.contains("show"))
{
dropdown1.classList.toggle("show");
}
if(dropdown3.classList.contains("show"))
{
dropdown3.classList.toggle("show");
}
}
else if(elementId == "dropThree")
{
dropdown3.classList.toggle("show");
if(dropdown2.classList.contains("show"))
{
dropdown2.classList.toggle("show");
}
if(dropdown1.classList.contains("show"))
{
dropdown1.classList.toggle("show");
}
}
}
It depends on your definition of efficient. You won't be able to increase the performance significantly since it's probably executing in few milliseconds already.
However, you can cut many line of code by using add / remove instead contain / toggle (and if for some reason the show class is added to a second dropdown, your button will start displaying or hidding the wrong items). You can also write a more generic function by looping into n array. That would allow you to add buttons and dropdowns more easily (This code isn't tested but you'll get the point.):
var dropdownArray = [];
dropdownArray.push(document.getElementById("dropOne"));
dropdownArray.push(document.getElementById("dropTwo"));
dropdownArray.push(document.getElementById("dropThree"));
function toggleDropdown(elementId) {
dropdownArray.forEach(function(dropdown){
if(dropdown.id == elementId) {
dropdown.classList.add("show");
} else {
dropdown.classList.remove("show");
}
});
}
I am having a problem with a jQuery plugin i am writing and was hoping for some guidance here.
The plugin is just a simple "Accordion". When you click on a heading, other already expanded sections collapse, and the clicked section expands. (i know there are many accordion plugins to download, but consider this an educational exercise for me as well)
Below is my full page code.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<section class="collapsibleGroup">
<div>
<h3>Heading 1</h3>
<div class="hiddenContent">
<ol>
<li>line 1</li>
<li>line 2</li>
</ol>
</div>
</div>
<div>
<h3>Heading 2</h3>
<div class="hiddenContent">
test
</div>
</div>
</section>
<script>
(function($) {
$.collapse = function( el, options ) {
var base = this;
base.$el = $(el);
base.init = function() {
base.$hideable = base.$el.find('.hiddenContent');
base.$trigger = base.$el.find('h3');
base.$hideable.hide();
}
base.init();
base.$trigger.on('click', function(e){
var $clicked = $(this);
var isVisible = ($clicked.next('div.hiddenContent').is(':visible')) ? true : false;
base.$hideable.slideUp(300);
base.$hideable.promise().done(function(){
if(!isVisible) {
$clicked.next('div.hiddenContent').slideDown(300)
}
})
})
};
$.fn.collapse = function(options) {
return this.each(function() {
(new $.collapse(this, options))
})
}
})(jQuery);
$('.collapsibleGroup').collapse();
</script>
</body>
</html>
My problem - which is only happening in Internet Explorer - is this. If you click "heading 1" you will see it expand, and 2 numbered bullets are shown. Then click "heading 2" and the first heading will collapse, and the second heading will expand, showing some text. Now, if you click "heading 1" again, section 2 collapses, section 1 expands, but the numbered bullets are both numbered 0 (zero).
I have no idea why this is happening, but I suspect it has to do with the "promise" function. If i take my slideDown command outside of a promise, this doesn't happen. In reality, my code is larger than this, and the promise is required, so if anyone can shed any light on this subject, I would be grateful.
Many thanks
After searching through various tutorials i found something that almost fits my needs but i'm having trouble getting the menu to function how i really would like it too.
I set up a jsfiddle to show my efforts, i'm not very good at this even though i'm trying my best to understand.
http://jsfiddle.net/HZksH/2/
I would like some help on how i can get this menu , when in default to always show the content1 area, then if you toggle open the "Open/Close" buttom and menu1,menu2,menu3 appear , when i select any of the 3 , the content replaces the content1 and then closes the menu again
any ideas would be appreciated
<div class="menu">
<div class="submenu" id="menu" data-content="sort">menu1</div>
<div class="content" id="sort">content1</div>
<div class="submenu" id="menu1" data-content="1sort">menu2</div>
<div class="content" id="1sort">content2</div>
<div class="submenu" id="menu2" data-content="sort2">menu3</div>
<div class="content" id="sort2">content3</div>
</div>
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
});
});
Here refer to this fiddle: http://jsfiddle.net/HZksH/3/
I have modified your js a bit
$(document).ready(function() {
$('.menu').hide().before('Open/Close');
$('a#toggle-menu').click(function() {
$('.menu').slideToggle(1000);
return false;
});
//$('.content').hide();
$('.submenu').click(function(){
$('.content:visible').hide('fast');
$('#' + $(this).data('content')).show('fast');
$('.menu').slideToggle(1000);
});
});
I hope it solves your problem
I am trying to create a sub navigation. Right now I have two subnav. When i hover over the first item on the main menu the corresponding submenu appears. But when I hover over the second item the second sub nav appears OVER the first one. How can I write the code so that this does not happen?
url: http://arabic001.com
$(document).ready(function() {
$('#arbNavText01').mouseover(function() {
$('#subNav01').show('slow');
});
$('#subNav01').mouseleave(function() {
$('#subNav01').hide('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav02').show('slow');
});
$('#subNav02').mouseleave(function() {
$('#subNav02').hide('slow');
});
})
I just tried the below suggestion from Scott and I am not able to show and hide the submenu on hover. Any ideas of how to solve this problem? Here are my new codes:
html
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display:none;">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">
<div id="engNavText02">Numbers</div>
<div id="arbNavText02">الأحرف</div>
<div id="subNav02" style="display: none; ">
<a href="colors" class="subNav">
<span style="font-size:26px; cursor:pointer;">قراءة</span</a>
<br>reading<br><br>
</div>
</div>
and the JS
$(document).ready(function() {
$('.menu_item').children().hover(
function(){
$subNav = $(this).parents('menu_item').children("div[id^='subNav'");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});
})
You've created a mouseleave event, but you've only attached it to the submenu. So in order to make a menu disappear, the user will have to hover over the submenu and then move out. You could achieve what you want by hiding other submenus before opening a new one. So keeping your mouseleave events as you have them, you could modify your 2 mouseover events to this:
$('#arbNavText01').mouseover(function() {
$('#subNav02').hide('slow');
$('#subNav01').show('slow');
});
$('#arbNavText02').mouseover(function() {
$('#subNav01').hide('slow');
$('#subNav02').show('slow');
});
Edit for comment:
I was thinking about that when I went and looked at your page originally. I think if you used a slightly different structure in your html this could be done. Right now your menu divs aren't clearly structurally related to each other so maybe add a div that can contain the 3 elements associated with each menu item.
I'm going to spit ball an idea, it may not even work let alone be the best way.
<div id="menu01" class="menu_item">
<div id="engNavText01">Alphabet</div>
<div id="arbNavText01">الأحرف</div>
<div id="subNav01" style="display: none; ">
<span style="font-size:26px; cursor:pointer;">قراءة</span
<br>reading<br><br>
</div>
</div>
<div id="menu02" class="menu_item">...
Edited JS, I think now it could work
$('.menu_item').hover(
function(){
$subNav = $(this).children("div[id^='subNav']");
if ($subNav.css('display', 'none')){
$subNav.show('slow');
}
},
function(){
$(this).children("div[id^='subNav']").hide('slow');
}
);
Was trying it out with a JSFiddle, seems alright there. Might need some modification for your uses.