I am working on a site and I need to have a basic show hide functionality for part of it where, when the user clicks on a subject header, it displays an unordered list below the subject header, and then when they click on the subject header again, it will hide the content again.
I have done this in the past, but when I tried applying my code to the site I am working on, it does not work....the hidden content does not display.
Currently, I am using javascript, but if there is a better way, perhaps with pure CSS, that would be fine with me too.
Here is the code I am trying right now (I have a feeling that it isn't working becasue of a parent/child div situation, but I wasn't sure and so I was hoping someone could lead me in the right direction:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="toggle-buttons">
<div class="web-develop-toggle">
<a href="#" onClick="toggle-web-develop('web-develop-content',this)">
<img src="images/subCtxHeader3-c.png" class="img-responsive" border="0">
</a>
</div>
<div class="web-develop-content" style="display: none;">
<div class="web-develop-body">
<ul class="svc-list">
<li class="svc-bullet"><span class="svc-list">Option 1</span></li>
<li class="svc-bullet"><span class="svc-list">Option 2</span></li>
<li class="svc-bullet"><span class="svc-list">Option 3</span></li>
<li class="svc-bullet"><span class="svc-list">Option 4</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
And here is the javascript that I am using currently, which has worked for me in the past, ironically enough:
<script type="text/javascript">
function toggle-web-develop(id, link) {
var e = document.getElementById(id);
if (e.style.display == '') {
e.style.display = 'none';
} else {
e.style.display = '';
}
}
</script>
Any and all help would greatly be welcomes as I have been stuck on this for a full day.
Thanks in advance!
-- Dan
You cannot use - in a function name. Try something like toggleWebDevelop()
You are trying to find web-develop-content by id, but you are using it as a class in your HTML
<div class="web-develop-content" style="display: none;">
Should be...
<div id="web-develop-content" style="display: none;">
Also, I would use e.style.display = 'block'; instead of e.style.display = '';
DEMO
Related
I need it to be a javascript solution only please. Please refer to this demo.
The goal is to hover the dots on the right bottom corner and swap the images accordingly. But what it does now is showing a blank page when hovering, and the whole ul becomes vertical and goes to top left corner. What did I do wrong here???
HTML:
<div id="wrapper">
<section id="contentWrapper">
<div id="resistorContent" class="content">
<section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg"></section>
<section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg"></section>
<section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg"></section>
<section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg"></section>
<ul>
<li onMouseOver="showDetail(resistorDetail1)"></li>
<li onMouseOver="showDetail(resistorDetail2)"></li>
<li onMouseOver="showDetail(resistorDetail3)"></li>
<li onMouseOver="showDetail(resistorDetail4)"></li>
</ul>
</div>
</section>
</div>
JAVASCRIPT:
<script type="text/javascript">
var children = document.querySelectorAll('.content > section[id]')
function showDetail(target){
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
document.getElementById(target).style.display = 'block';
}
</script>
POSSIBLE COLLIDING CSS ?:
.content section:not(:first-child) {
display: none;
}
Thank you in advance!!
TL;DR
Here is the working fiddle: https://jsfiddle.net/2qz2srqs/3/
Reason
Your code was very close, but it had a few minor issues.
The first was a copy-paste error, you had two elements with the id of resistorDetail3.
Second, your syntax for the onmouseover event was incorrect. Prefix any javascript with javascript: and ensure it has proper syntax.
Third, your showDetail method expected a string id of the element to show. In your onmouseover declaration you had showDetail(resistorDetail1) instead of showDetail('resistorDetail1').
Finally, when you javascript is referenced in the HTML, you need to make sure you load the javascript first. Just by taking a look at the developer's console you could see that it through an error "showDetail is not defined.. I switched it to No wrap - in <body> and it worked fine.
BUT I highly recommend against directly referencing javascript from your HTML. Instead, load the HTML first and then use the DOM ready event of javascript to bind your events. That will increase your load time and make it easier to switch to something like jQuery/Zepto if needed.
Full Code
HTML
<section id="contentWrapper">
<div id="resistorContent" class="content">
<section id="resistorDetail1">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" />
</section>
<section id="resistorDetail2">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" />
</section>
<section id="resistorDetail3">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" />
</section>
<section id="resistorDetail4">
<img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" />
</section>
<ul>
<li onmouseover="javascript: showDetail('resistorDetail1')"></li>
<li onmouseover="javascript: showDetail('resistorDetail2')"></li>
<li onmouseover="javascript: showDetail('resistorDetail3')"></li>
<li onmouseover="javascript: showDetail('resistorDetail4')"></li>
</ul>
</div>
</section>
JS
var children = document.querySelectorAll('.content > section[id]');
function showDetail(target) {
for (var i = 0, child; child = children[i]; i++) {
child.style.display = 'none';
}
document.getElementById(target).style.display = 'block';
}
CSS
(unchanged)
Here's another working fiddle.
https://jsfiddle.net/2qz2srqs/4/
The issue was a couple things.
You were passing undefined vars into your onmouseover attributes. You wanted strings (I quoted them)
In JSFiddle, you don't automatically get the window scope, so you have to assign a function as a property of a window if you want to be able to hit it with an event attribute.
I am trying to get the Meet Some of Our Staff section to only show once the text "Meet Some of Our Staff" is clicked. I have used code that has gotten it to hide the section when "Meet Some of Our Staff" is clicked, but cannot figure out how to reverse it to where it is already hidden upon page load and then appears when "Meet Some of Our Staff" is clicked.
Script:
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
HTML:
<div class="content3">
<div class="title2">
<h1><center><a href="javascript:hideshow(document.getElementById('staff'))">Meet Some
of Our Staff</a></center></h1>
</div>
<div id="staff">
<center>
<ul>
<a href="http://www.instituteforcreativelearners.org/"
onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">
<li>
<img src="images/kami.jpg" alt="...">
<br />
<p><span class="stafftitle">Kami Barron</span> <br /> <span
class="staffsubtitle">Director of Education</span></p>
</li>
</a>
</ul>
</center>
</div>
</div>
Check
Sample - reformatted HTML/JS
Change
if (which.style.display="block")
to
if (which.style.display == "block")
if you are not setting display:none in CSS, then use this
if (!which.style.display || which.style.display == "block")
On what you want to be hidden apply the CSS rule display:none. Then in Javascript,
document.getElementsByTagName("a")[0].addEventListener("click",function(e)
{
document.getElementById("staff").style.display="block";
e.preventDefault()
});
Use CSS to hide the element when the page loads.
<div id="staff" style="display: none;">
That will hide the div until the user clicks on the link.
Edit: Check out this JSFiddle for a working example using your code
So I have a few tabs. There can be multiple tabs, but I currently have 3. What I am trying to do is to change the styling of the tab when it is clicked and the other tabs to have some other styling. My code is as follows:
<div id="ClaimTabs" class="TabbedPanels">
<div class="TabbedPanelsTabGroup">
<div id="list1" class="TabbedPanelsTab TabbedPanelsTabSelected">
<a id="anchor1" class="TabbedPanelAnchor" href="javascript:showTab(1);">Tab 1 </a>
</div>
<div id="list2" class="TabbedPanelsTab">
<a id="anchor2" href="javascript:showTab(2);" >Tab 2</a>
</div>
<div id="list3" class="TabbedPanelsTab">
<a id="anchor3" href="javascript:showTab(3);">Tab 3</a>
</div>
</div>
<div id="ClaimContent" class="TabbedPanelsContentGroup">
<div id="tab1" class="TabbedPanelsContent TabbedPanelsContentVisible" style="display: block;">
Screen 1
</div>
<div id="tab2" class="TabbedPanelsContent" style="display: none;">
Screen 2
</div>
<div id="tab3" class="TabbedPanelsContent" style="display: none;">
Screen 3
</div>
</div>
</div>
My script that manipulates the styling is as follows:
function showTab(tabNumber) {
var children = document.getElementById('TabbedPanelsTabGroup').childNodes;
document.getElementById('tab'.concat(tabNumber)).style.display = 'block';
document.getElementById('list'.concat(tabNumber)).setAttribute("class", "TabbedPanelsTab TabbedPanelsTabSelected");
document.getElementById('anchor'.concat(tabNumber)).setAttribute("class", "TabbedPanelAnchor");
for(i=1; i <= children.length ; i++)
{
if(i != tabNumber){
document.getElementById('tab'.concat(i)).style.display = 'none';
document.getElementById('list'.concat(i)).setAttribute("class", "TabbedPanelsTab");
document.getElementById('anchor'.concat(i)).setAttribute("class", "");
}
}
}
I was wondering if my logic is right. I am concatenating the tab, list and anchor with the number and updating styles. But this does not seem to be working.
You appear to have at least two problems here.
First, you're trying to use document.getElementById for TabbedPanelsTabGroup, but that's a class.
Second, you're using .childNodes when you are probably looking for .children. .childNodes includes all child nodes, including the text inside the tags (which is a node). So when you use that number to loop over it, your loop isn't counting to 3 (your # of divs), it's counting to 7, and that's giving errors.
But, .children isn't supported before IE9, so like others have suggested, you may want to consider jQuery to get at that with better support.
With plain JavaScript I would recommend EventListener:
<div id="elem"> "some content here" </div>
var elem = document.getElementById('elem');
elem.addEventListener ('click', show, false);
function show() {
//add css Class
var element = document.getElementById("elem");
element.classList.add("activeTab");
}
But as mentioned in the comment, jQuery is perfect for that kind of things.
best
M
Hope you can help me..Im trying to keep highlighed the div on the top menu in which im currently on, sama as on this website "questions, tags users.."
Here is my site: http://www.ehivemarketing.com/web-design.php
so basicaly the top menu is an include in which is just that:
<div class="each_circle_menu"><img src="images/bt_top_webdesign.png" border="0"/></div>
<div class="each_circle_menu"><img src="images/bt_top_online_marketing.png" border="0" /></div>
<div class="each_circle_menu"><img src="images/bt_top_social_media.png" border="0"/></div>
<div class="each_circle_menu"><img src="images/bt_top_learningcentre.png" border="0" /></div>
<div class="each_text_menu1"><a href="../index.html" >Home</a></div>
<div class="each_text_menu"><a href="../about-ehive-digital.php" >About Us</a></div>
<div class="each_text_menu"><a href="../contact-us.php" >Contact Us</a></div>
<div class="each_text_menu"><a href="../careers.php" >Careers</a></div>
<div class="each_text_menu">Clients</div>
this is my CSS for the Hover:
.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}
in which works fine but I need to keep the color background once it is clicked.
Any thoughts of how I could inplement this?
These links may be helpful to you on your work:
link1
and
link2
Hope these help you on your issue.
You can create a class, let's say active, that is the same as :hover like this:
.each_text_menu:hover, .each_text_menu.active {
background-color:#aad400;
}
And than check with PHP - as you're using PHP - which page is select and add the active class to this link in the navigation. Could look like this:
<div class="each_text_menu<php print ( 'career' == $page ? ' active' : '' ); ?>">
<a href="../careers.php" >Careers</a>
</div>
There are many ways you can do this. One simple way to do it is by adding a relevant class to the body tag on each page which you can then reference.
So say your navigation is like this:
<ul id="nav">
<li id="nav1">Nav #1</li>
<li id="nav2">Nav #2</li>
<li id="nav3">Nav #3</li>
<li id="nav4">Nav #4</li>
</ul>
Your body tag on the homepage would be something like this:
<body class="nav1-on">
So your css would be:
body.nav1-on ul#nav li#nav1 {
// some css styles
}
Define an additional css class defined like this:
.active
{
background-color:#aad400;
}
The on the code that generates the menu, add the class to the corresponding div.
I see two ways how to approach this, first is to do the logic in php - check whatever page you're on and echo and add the class to the correct item. Im a bit rusty when it comes to php so there might be errors in the syntax
<div class="each_circle_menu <? if($page == 'web-design') { echo "greenBG"; } ?>">
Or you could also use javascript/jquery to do the thing for you
$(document).ready( function() {
$('.each_circle_menu').each(function() {
var item = $(this);
if(window.location.indexOf(item.attr('href')) != -1) {
item.addClass('greenBG');
}
});
});
Use an .active class.
.each_text_menu1:hover
{
background-color:#aad400;
}
.each_text_menu:hover
{
background-color:#aad400;
}
.active{background-color:#aad400;}
The HTML:
<div class="each_circle_menu"><img src="images/bt_top_webdesign.png" border="0"/></div>
<div class="each_circle_menu"><img src="images/bt_top_online_marketing.png" border="0" /></div>
<div class="each_circle_menu"><img src="images/bt_top_social_media.png" border="0"/></div>
<div class="each_circle_menu"><img src="images/bt_top_learningcentre.png" border="0" /></div>
<div class="each_text_menu1"><a href="../index.html" >Home</a></div>
<div class="each_text_menu"><a href="../about-ehive-digital.php" >About Us</a></div>
<div class="each_text_menu"><a href="../contact-us.php" >Contact Us</a></div>
<div class="each_text_menu"><a href="../careers.php" >Careers</a></div>
<div class="each_text_menu active">Clients</div>
This question already has answers here:
Keep toggle state on divs using cookie.js after page refresh view jsFiddle
(2 answers)
Closed 9 years ago.
I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :
$(function(){
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
});
});
What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.
The html is this:
<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->
<div id="sub-nav-wrapmin" class="snWrap divone">
<div id="sn-contentmin">
<div id="sn-likemin"></div>
<div id="sn-coffeesml"></div>
<div id="sn-sharemin"></div>
<div id="sn-commentsml"></div>
<div id="toggle-barmin">
<div id="sn-sidebrdrmin"></div>
<div class="sn-toggle button"></div>
</div>
<ul class="sn-comicsmin menu">
<li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="sn-archive" href="#archive.html">Archive</a></li>
<li><a class="sn-vote" href="#vote.html">Vote</a></li>
<li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
<div id="sub-nav-container">
<div id="sub-nav-content">
<div id="sn-bnrlft"></div>
<div id="sn-bnrrgt"></div>
<div class="sn-dividelft"></div>
<div class="sn-dividergt"></div>
<div id="sn-likebg"></div>
<div id="sn-coffeebtn">
</div>
<div id="sn-sharebtn"></div>
<div id="sn-commentbtn"></div>
<div id="toggle-bar">
<div id="sn-sidebrdr"></div>
<div class="toggle button"></div>
</div>
</div>
<div id="sub-nav-brdr">
<ul class="sub-nav-comics menu">
<li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="archive" href="#archive.html">Archive</a></li>
<li><a class="vote" href="#vote.html">Vote</a></li>
<li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
</div>
The CSS is this:
#sub-nav-wrap {
display: none;
}
This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working.
Please help...
you're almost done everything right only have written a lot of superfluous :)
$(function(){
if($.cookie('submin_visible') == 'true') {
$('#sub-nav-wrapmin').show();
$('#sub-nav-wrap').hide();
} else {
$('#sub-nav-wrapmin').hide();
$('#sub-nav-wrap').show();
}
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
var isVisible = $('#sub-nav-wrapmin').is(':visible').toString();
$.cookie('submin_visible', isVisible);
});
});