js hide/unhide with css formatting - javascript

I have the following js script which (on its own it works fine really):
<style>
<!--
.hide { display: none; }
.unhide {
display: block;
text-decoration: none;
color: black;
}
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hide')?'unhide':'hide';
}
}
</script>
</head>
<body>
<div id="col2">
<a href="javascript:unhide('content1');">
Title of Content</a>
</div>
<div id="col2">
<div id="content1" class="hide">
Body of content
</div>
</div>
Left alone, this produces output, at least. But I want to format this according to this css code:
a.unhide li {
background: #fff;
font: 20px century schoolbook, serif;
}
a.unhide li:hover {
background: #ddd;
text-decoration:underline;
padding: 3px 8px;
display: table-row;
line-height: 500%;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.hide {
font: 20 px century schoolbook, serif;
color: black;
text-decoration: none;
}
So how can I possibly "pair" all this? I've posted elsewhere and people have been stumped. Please help. I can induce changes into just about every aspect BUT the "unhide" portion of the js script. It does not cooperate with me ;( Basically I want a #ddd hover effect over the "unhide" link and all content to be in century schoolbook. Please help. Thank you.

Your problem might be that you have double IDs. IDs cannot be duplicate, they have to be unique. You can give them a class instead.
Try this instead:
HTML
<div>
<a href="javascript:unhide('content1');">
Title of Content
</a>
</div>
<div>
<div class="content1 hide">Body of content</div>
</div>
Javascript
function unhide(divID) {
var item = document.getElementsByClassName(divID)[0];
console.log(item);
console.log(item.className == divID + ' hide');
if (item) {
item.className = (item.className == divID + ' hide') ? divID + ' unhide' : divID + ' hide';
}
}
Demo here
In your CSS you are applying the hover to a a.unhide li:hover {. Is that what you want? I see no li in your code and the content1 in your code is a div not a a.

Related

Fade into light mode when toggle is clicked?

In the top left corner of this page, I have a "Light/Dark mode" toggle. When 'Light mode' is clicked, it fades into dark mode nicely no problem. But once it's in Dark mode, and you click 'light mode', it doesn't fade in nicely and I can't seem to get it to work.
What would I need to add to my code to get it to fade nicely in to light mode?
<!DOCTYPE html>
<html id= "mode" lang="en-au">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title> Test </title>
<head>
<link rel = "icon" type = "image/png" href = "https://ibb.co/bRc1Qqq">
<link rel = "apple-touch-icon" type = "image/png" href = "https://ibb.co/bRc1Qqq"/>
<!-- Square Windows tiles -->
<meta name="msapplication-square70x70logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square150x150logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square310x310logo" content="https://ibb.co/bRc1Qqq"></meta>
<!-- Rectangular Windows tile -->
<meta name="msapplication-wide310x150logo" content="https://ibb.co/bRc1Qqq"></meta>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gugi|Raleway|Abril+Fatface|Unica+One|Press+Start+2P|Bungee">
<!-- Makes stuff fadein on pageload-->
<script>
window.onload = function()
{document.body.className += " loaded";
document.querySelector("body").style.opacity = 1;
}
</script>
<style>
html {
height: 100%;
background-color:#b8b8b8;
}
body {
text-decoration: none;
font-family: "Raleway";
border-radius: 7px;
/* color-scheme: light dark; */
}
h1, ul {
padding-top: 5%;
}
body, .fadein {
opacity: 0;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3;
}
body.loaded .fadein {
opacity: 1;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header h1 {
margin: 0;
}
.tabs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.tabs li {
flex-grow: 1;
text-align: center;
padding: 0.5%;
}
.tabs a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
border-radius: 7px;
}
.tabs a:hover,
.tabs a.active {
background-color: #ddd;
}
.main {
padding: 20px;
}
/* Hides all sections by default
.section {
display: none;
}
*/
.section.active {
display: block;
}
.dark-mode {
background-color: #020C17;
color: #ffffff;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.dark-mode ul a{
background-color: #020C17;
color: #ffffff;
}
.dark-mode ul a:hover,
.dark-mode ul a.active {
background-color: #081334;
color: #ddd;
}
#dark-mode-button {
color: #ddd;
padding: 10px;
border-radius: 7px;
cursor: pointer;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
position: fixed;
}
</style>
<!-- makes scrolling smooth when using anchor -->
<script>
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault();
var target = document.querySelector(this.getAttribute('href'));
var offset = target.offsetTop;
window.scrollTo({
top: offset,
behavior: 'smooth'
});
});
</script>
<!-- The HTML for the website -->
<body>
<div id="dark-mode-button"><p id="mango" class="btn-toggle">Dark mode</p></div>
<div class="fadein">
<div class="container">
<!-- The header with the title and tabs -->
<div class="header">
<h1>Testing</h1>
<ul class="tabs">
<li><a href="#section1" >About</a></li>
<li>Projects</li>
<li>Test</li>
</ul>
</div>
<!-- The main content of the website, with the sections -->
<div class="main">
<div id="section1">
<h2>About</h2>
<p>This is the content of section 1.</p>
</div>
<div class="section" id="section2">
<h2>Projects</h2>
<p>This is the content of section 2.</p>
</div>
<div class="section" id="section3">
<h2>Test</h2>
<p>This is the content of section 3.</p>
</div>
</div>
</div>
</div>
</body>
<script>
// Get the elements for the tabs and sections
const tabs = document.querySelectorAll('.tabs a');
const sections = document.querySelectorAll('.section');
// Add a click event listener to each tab
tabs.forEach(tab => {
tab.addEventListener('click', event => {
event.preventDefault(); // prevent the default link behavior
// Remove the active class from all tabs and sections
tabs.forEach(tab => tab.classList.remove('active'));
sections.forEach(section => section.classList.remove('active'));
// Add the active class to the clicked tab and corresponding section
tab.classList.add('active');
document.querySelector(tab.getAttribute('href')).classList.add('active');
});
});
</script>
<!-- JavaScript code to handle the button click and switch between modes. also uses button id and the body element -->
<script>
// Get the button and add a click event listener to it
const button = document.getElementById('dark-mode-button');
button.addEventListener('click', () => {
// Get the current body element and toggle the "dark-mode" class
const body = document.getElementById("mode");
body.classList.toggle('dark-mode');
});
</script>
<script>
/* Fetch the buttom element */
const mode = document.getElementById('mango');
/* Add click event listener where we will provide logic that updates the button text */
mode.addEventListener('click', function() {
/* Update the text of the button to toggle beween "More" and "Less" when clicked */
if(mode.innerText.toLowerCase() === 'dark mode') {
mode.innerText = 'Light mode';
}
else {
mode.innerText = 'Dark mode';
}
});
</script>
You need to apply the tranition effect to the elements affected by your dark theme, not the dark-mode class itself. You did it right for the #dark-mode-button though.
Solution for your code: add a transition (transition: all 0.5s ease-in-out) on html{} and .tabs a {}, and you can remove the transition effect on the dark-mode class. Fiddle: https://jsfiddle.net/40y5axcd/
Note: you applied a white text color to the whole html for dark mode, hence your main content text isn't visible on a white background. I left it as is, since it wasn't a part of your question.
Going forward you're better off using an utility class with the transition effect and apply it to all elements affected by the dark mode, especially if you continue to add elements to your page and want to change the transition duration. You rather only have to change one class, then having to go through every element and change the duration.

Replace image by another using css display and JS

I'm trying to apply the same effect on the social network logo: https://www.pierrejacobson.com/
Instead of using CSS awesome, I would like to do it with an image but it doesn't work as expected.
Regarding CSS, there is no need to put the code here. I just have the three social network logo on display: none;.
Could you please help me?
<div id="social_bar">
<div class="width_size">
<img alt="image enveloppe" class="email" src="email.png" />
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<img alt="logo_facebook" id="fixed_facebook" src="facebook.png" />
<img alt="logo_youtube" id="fixed_youtube" src="youtube.png" />
<img alt="logo_instagram" id="fixed_instagram" src="instagram.png" />
<img alt="logo_facebook" id="facebook" src="facebook_blue.png" />
<img alt="logo_youtube" id="youtube" src="youtube_blue.png" />
<img alt="logo_instagram" id="instagram" src="instagram_blue.png" />
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>
<!--social_bar-->
<div id="logo_bar">
<div class="width_size">
<img alt="logo" src="logo-pierre-jacobson2.png" />
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="30" value="RECHERCHER..." />
<img alt="search" src="search-solid.svg" />
</div>
</div>
JS
const get_img = function(name){ return document.getElementById(name); };
const img_one = get_img("fixed_facebook");
const img_two = get_img("fixed_youtube");
const img_three = get_img("fixed_instagram");
const img_facebook = get_img("facebook");
const img_youtube = get_img("youtube");
const img_instagram = get_img("instagram");
img_one.addEventListener("mouseover", function (event) {
img_one.style.display = "none";
img_facebook.style.display = "inline";
});
img_two.addEventListener("mouseover", function (event) {
img_two.style.display = "none";
img_youtube.style.display = "inline";
});
img_three.addEventListener("mouseover", function (event) {
img_three.style.display = "none";
img_instagram.style.display = "inline";
});
img_one.addEventListener("mouseout", function (event) {
img_one.style.display = "inline";
img_facebook.style.display = "none";
});
img_two.addEventListener("mouseout", function (event) {
img_two.style.display = "inline";
img_youtube.style.display = "none";
});
img_three.addEventListener("mouseout", function (event) {
img_three.style.display = "inline";
img_instagram.style.display = "none";
});
from display "none" to "inline" there is no transition. Instead try to use "opacity: 0" and "opacity: 1" and set the "transition: all 0.2s ease";
The Display Property:
In your initial question you say that you want to use the display property to hide and show your images, however, you also state that you would like to have the screens transition from one to another.
Transitioning is definitely possible through the aptly named CSS transition property
The problem is that the display property is not able to be animated. If an element is configured to display: none; the page is immediately repainted with that element removed.
This means that you need to use a different property, and we typically would use opacity or visibility. Here are the differences between these three:
display: none;
immediately collapses the element
removes the element from view.
There's no transition allowed.
visibility: hidden;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed
The element will still pop out of sight.
opacity: 0;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed.
The element will fade until it is not visible.
Here is an example of the different way these properties affect the layout of the page:
const context = document.querySelector("#examples");
const ele = context.querySelector.bind(context),
hide = section => section.classList.toggle("hide"),
onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section));
opacity = ele(".opacity"),
opacity_button = ele("#oBtn"),
visibility = ele(".visibility"),
visibility_button = ele("#vBtn"),
display = ele(".display"),
display_button = ele("#dBtn"),
toggle_button = ele("#tBtn");
onClickHide(opacity_button, opacity);
onClickHide(visibility_button, visibility);
onClickHide(display_button, display);
toggle_button
.addEventListener("click", function() {
hide(opacity);
hide(visibility);
hide(display);
});
html,
body,
#examples {
width: 100%;
height: 100%;
box-sizing: content-box;
margin: 0px;
padding: 0px;
}
#examples section {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
border: 5px solid black;
margin: 5px;
transition: all .5s ease-in-out;
}
#examples section.hide {
border-radius: 100px;
}
#examples section.opacity {
background-color: blue;
color: white;
}
#examples section.opacity.hide {
opacity: 0;
}
#examples section.visibility {
background-color: purple;
color: white;
}
#examples section.visibility.hide {
visibility: hidden;
}
#examples section.display {
display: block;
background-color: red;
color: white;
}
#examples section.display.hide {
color: black;
display: none;
}
<main id="examples">
<section class="opacity">opacity <button id="oBtn">hide</button></section>
<hr />
<section class="visibility">visibility <button id="vBtn">hide</button></section>
<hr />
<section class="display">display <button id="dBtn">hide</button></section>
<hr/>
<button id="tBtn">Toggle All</button>
</main>
Note: In the above there are actually two properties transitioning - opacity, visibility, or display - and border-radius. You should notice firstly how in the display example the border-radius change isn't seen at all, and secondly how the display example is the only one that collapses the element so that it no longer takes up space.
Applying Transitions:
By combining opacity: 0; with height: 0px; width: 0px; we can remove the element visually from the page while also removing any impact it has on other elements - meaning that it won't take up space and is transitionable.
However, in your particular case ( wanting to change the image to a different color ), all of that isn't necessary. You can swap out your img tags for div tags, then apply the background-url property to get an image (a.e. background-url: url("facebook.png"); ) and a hover effect that adds whatever background-color you're looking for.
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
Note: You can also adjust background-blend-mode to other options to change how the image and the color are put together. a.e. background-blend-mode: luminosity; will make the color lighter background-blend-mode: color-dodge; will make it darker and add "dodge" effect. Feel free to play around!
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
<div id="social_bar">
<div class="width_size">
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<div alt="logo_facebook" id="facebook"></div>
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>

How to change body background image on menu item hover?

I have a menu and I need to change the body background to different image on every menu item. Also, it would be nice if it would fade or bounce or do something nice and clean while changing.
So far I have this code:
var $body = $('body');
$('li:first-child').hover(function(){
$body.css('background-image', 'url("img/dd.jpg")');
}, function() {
$body.css('background-image', '')
})
The html is
<div id="main-menu-container">
<ul>
<li><a><span>One</span></a></li>
<li><a><span>Two</span></a></li>
<li><a><span>Three</span></a></li>
</ul>
</div>
How do I continue and add the animation?
You can just select the items where you want to change the background.
var $body = $('body');
$('#main-menu-container li a').hover(function(){
$body.css('background', 'red');
}, function() {
$body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
If you want a different background you need to store them somehow. Maybe as data attribute on the menu, or create a object, storing the images, or something.
var $body = $('body');
var colors = ['#f00', '#f0f', '#0f0'];
$('#main-menu-container li a').hover(function(){
$body.css('background', colors[$(this).parent().index()]);
}, function() {
$body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
Try to add all the images to the page with z-index:-1 and position:fixed. Then just animate opacities of those images. Here's HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<div class = "images-container">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
<img src="img0.jpg">
</div>
<ul id = "main-menu-container">
<li><a><span>One</span></a></li>
<li><a><span>Two</span></a></li>
<li><a><span>Three</span></a></li>
</ul>
</body>
</html>
CSS:
div.images-container img{
z-index: -1;
position: fixed;
width:1600px;
height: 900px;
}
ul#main-menu-container{
position: relative;
top:50px;
}
ul#main-menu-container li{
font-weight: 500;
font-family: sans-serif;
background: #ed2389;
border-color: #fff;
border-width: 1px;
float: left;
color: white;
list-style: none;
padding: 8px;
border-style: solid;
border-collapse: collapse;
}
ul#main-menu-container li:hover{
background: #fff;
color: #ed2389;
border-color: #ed2389;
}
JavaScript:
$(function() {
$("div.images-container img").fadeOut(0);
$("div.images-container img").last().fadeIn(0);
$("#main-menu-container").hover(function(){
$("div.images-container img").last().fadeToggle(500);
});
$("#main-menu-container li").hover(function(e) {
var $target = $(e.target);
var $menu = $("#main-menu-container li");
var index = $menu.index($target);
var $images = $("div.images-container img");
$images.eq(index).fadeToggle(500);
});
});
Here I used the order of the images to choose what image is going to be displayed. For more control you can use ids and classes.
Here's a fiddle: https://jsfiddle.net/eoppskvL/
P.S. I don't own any of the images in the fiddle in case I need to say that.
Okey, so I figured it out. Thank you for your help people!
The html
<div id="main-menu-container">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
The CSS
body {
background: url("../img/back.png");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-transition: background ease-in 1s;
-moz-transition: background ease-in 1s;
-o-transition: background ease-in 1s;
transition: background ease-in 1s;
}
.background-0 {
background: url("../img/dd.jpg");
}
.background-1 {
background: url("../img/dd.jpg");
}
.background-2 {
background: url("../img/dd.jpg");
}
The script
var list_elements = $('ul li');
var current_index = null;
list_elements.on('mouseenter', function() {
current_index = list_elements.index(this);
$('body').addClass('background-' + current_index);
}).on('mouseleave', function(){
$('body').removeClass('background-' + current_index);
current_index = null;
});
Unfortunately you cannot animate the background-image of an element. You could use this trick to add a transparent background and animate the opacity of the :after pseudo-element.

Add fade-in effect in nested accordion

I am new to jquery. I have a custom Accordion in which i'll like to add in a fade-in effect to the text when a particular header title is clicked. I tried many different ways but it did not get the results I want.
Here are my accordion codes :
HTML
<div class="container">
<!--Enter accordion here-->
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" style="margin-top: -92px; font-family: 'FUTURA MEDIUM'; font-weight: 300; line-height:1.5;">
<li>
<h3 class="cbp-nttrigger">ArtZone’s 10th Anniversary Art Exhibition 2015</h3>
<div class="cbp-ntcontent bodytext">
<div class="myannualcontent">
<img src="images/Arts-House-Image.jpg" alt="" align="left" style=" margin-left: 2px; width: 19%; margin-bottom: 20px;
margin-top: 20px; margin-right: 35px;"/>
<p style="text-align: justify; padding-top: 20px; margin-left: 10px;">
Header text here <br /><br />
Join us once more as we delve into the world of our students’ creative journey express beautifully on paper. Under the guidance of our dedicated teachers, our students hereby present to you the fruits of their labour in their very distinctive way. <br /><br />
</p>
<div>
</div>
</li>
</ul>
CSS
.cbp-ntaccordion > li > .cbp-nttrigger:before {
font-size: 75%;
}
.cbp-ntaccordion > li > .cbp-nttrigger:before {
content: "\36";
}
.cbp-ntaccordion > li > .cbp-nttrigger:hover:before {
content: "\35";
color: inherit;
}
.cbp-ntaccordion > li.cbp-ntopen > .cbp-nttrigger:before,
.no-js .cbp-ntaccordion > li > .cbp-nttrigger:before {
content: "\34";
color: inherit;
}
.cbp-ntsubaccordion > li > .cbp-nttrigger:before {
content: "\32";
}
.cbp-ntsubaccordion > li > .cbp-nttrigger:hover:before {
content: "\33";
color: inherit;
}
.cbp-ntsubaccordion > li.cbp-ntopen > .cbp-nttrigger:before,
.no-js .cbp-ntsubaccordion > li > .cbp-nttrigger:before {
content: "\31";
color: inherit;
}
/* Initial height is zero */
.cbp-ntaccordion .cbp-ntcontent {
height: 0;
overflow: hidden;
}
/* When its open, set height to auto */
.cbp-ntaccordion .cbp-ntopen > .cbp-ntcontent,
.cbp-ntsubaccordion .cbp-ntopen > .cbp-ntcontent,
.no-js .cbp-ntaccordion .cbp-ntcontent {
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-ms-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
height: auto;
}
/* Example for media query */
#media screen and (max-width: 32em) {
.cbp-ntaccordion {
font-size: 70%;
}
}
Javascript
<script>
$( function() {
/*
- how to call the plugin:
$( selector ).cbpNTAccordion( [options] );
- destroy:
$( selector ).cbpNTAccordion( 'destroy' );
*/
$('#cbp-ntaccordion').cbpNTAccordion();
// $("cbp-ntopen").click(function () {
/** $("#cbp-ntcontent").fadeToggle("slow",
"linear").find(".close").on("click", function() {
$(this).parents("#cbp-ntcontent").fadeIn("slow");
return false;
});
}); **/
/** on click on any of the titles then run this codes
$("#cbp-ntaccordion").fadeToggle("slow", "linear").find(".close").on("click", function() {
$(this).parents("#cbp-ntaccordion").fadeOut("slow");
return false;
});
*/
} );
</script>
I didn't understand what you expect exactly. but assume you want this.if it is not tell me what you want.
This is your html
<h3 class="dofade">ArtZone’s 10th Anniversary Art Exhibition 2015</h3>
<p class="mefade" style="display:none;">This is what you want to show</p>
This is your css
if you are using external style, in your css file
.mefade{
display:none;
}
This is your javascript
if you are using internal js
<script type="text/javascript">
$(document).ready(function(){
$(".dofade").click(function(){
$(.mefade).fadeIn(3000);//3000 meant within this ms time it shows
});
});
</script>
if you use external js add this code
$(document).ready(function(){
$(".dofade").click(function(){
$(.mefade).fadeIn(3000);//3000 meant within this ms time it shows
});
});

How do I set jQuery accordion default to unopened? And toggle open/closed?

So I've got a page with a ton of accordions and when the first initially loads every single accordion by default is opened until I click on one. Then all of them close but that one and it then works fine from there.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="ss_menu">
<a class="ss_button">Accordion 1</a>
<div class="ss_content">
Content 1
</div>
</div>
<div id="ss_menu">
<a class="ss_button">Accordion 2</a>
<div class="ss_content">
Content 2
</div>
</div>
<div id="ss_menu">
<a class="ss_button">Accordion 3</a>
<div class="ss_content">
Content 3
</div>
</div>
CSS
/* Accordion controls */
#ss_menu {
border: 1px solid #ccc;
}
.ss_button {
cursor: pointer;
color: black;
}
.ss_content {
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
JS
jQuery(function() {
jQuery('.ss_button').on('click',function() {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});
And the related Codepen: http://codepen.io/jacob_johnson/pen/zvdQGO
So my questions are:
1. How can I set them all closed by default on page load?
2. How can I toggle the one active one off by clicking the activate button again?
Any help would be appreciated.
Solution to question 1
Add display: none to my content element.
Set display:none in the CSS to start and change the code to be smarter on what it is hiding.
jQuery('.ss_button').on('click',function() {
var content = jQuery(this).next('.ss_content');
jQuery('.ss_content').not(content).slideUp('fast');
content.toggleSlide('fast');
});
To do it using the code you have, you need a document.ready function which will close the content:
$(document).ready(function() {
$('.ss_content').hide();
$('.ss_button').on('click',function() {
$('.ss_content').slideUp('fast');
$(this).next('.ss_content').slideDown('fast');
});
});
However, this will lead to your content being visible for a second while the page loads. The better way of doing this is with a CSS class:
$(document).ready(function() {
$('.ss_button').on('click',function() {
var menu = $(this).closest('.ss_menu');
if (menu.hasClass('open')) {
$('.ss_menu.open').removeClass('open');
menu.addClass('open');
}
else {
menu.removeClass('open');
}
});
});
Then in your CSS, you set everything to a default state of closed, but animate it to open when its parent has an open class:
.ss_menu {
overflow:hidden;
}
.ss_menu.open .ss_content {
opacity:1;
max-height:1000px; /*set this to a height much bigger than you expect*/
}
.ss_content {
max-height:0;
opacity:0;
transition:all 0.2s ease-out; /*or whatever transition you want*/
}
P.S. you can't have more than one item in a page with the same id - I have assumed this was a mistake, and used ss_menu as a class instead of an ID selector.

Categories