What I need to be able to do is to have the text drop downs close when another is selected so that I do not end up with a bunch of drop downs open on the page at the same time.
I have two text dropdowns that will be used one after the other alternating on a page. In other words accordion1, accordion2, accordion1, accordion2 and so on the reason I have accordion1 and accordion2 is that with my limited experience it is the only way I could figure out change the button color so the list could alternate colors. It would be nice to consolidate the code, but I can live with the extra code if need be.
Here is the code for accordion1
var acc = document.getElementsByClassName("accordion1");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active1");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
var acc = document.getElementsByClassName("accordion2");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active1");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion1 {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accordion2 {
background-color: #8461E8;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
.active1,
.accordion1:hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */
.panel1 {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.accordion1:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.accordion2:after {
content: '\02795';
/* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active1:after {
content: "\2796";
/* Unicode character for "minus" sign (-) */
}
<Section><button class="accordion1"><h3>Alternators and regulators</h3>
</button>
<div id="accordion1-div" class="panel1">
<p>First group of words go here></div>
</Section>
<Section><button class="accordion2"><h3>Batteries and Inverters</h3>
</button>
<div id="accordion-div" class="panel1">
<p>Second set of words go here.</p>
</div>
</Section>
<Section><button class="accordion1"><h3>AC and DC Panels </h3>
</button>
<div id="accordian1-div" class="panel1">
<p>Third set of words reusing "accordion1 go here"</p>
</div>
</Section>
Any help or resources to figure out the needed code would be greatly appreciated.
Question 1 — "How do I not end up with a bunch of drop downs open on the page at the same time":
You close all dropdowns before opening another one. You can also create css rules to display or hide the dropdown. This way, it will be easier to find the currently active dropdown. See code below.
Question 2 — "How can I make the list alternate colors"
You can add more than one class to an element. Simply create color classes and add them to the right elements. See code below.
Notes:
Use the CSS selectors instead of JavaScript to show/hide the panel
Element h3 is not allowed as child of element button. Do it the other way round.
Use the same JavaScript code and CSS for all accordions.
Edit (scrollIntoView)
I added code to automatically scroll the window so that the active tab is visible.
It works only on Chrome, Firefox and Opera. Use this polyfill iamdustan/smoothscroll to use it in other browsers. See compatibility here and all functions here.
// Query all accordions
var accordions = document.querySelectorAll('.accordion');
for (var i = 0; i < accordions.length; i++) {
accordions[i].addEventListener('click', function() {
// Get the currently active accordion
var active = document.querySelector('.accordion.active');
// If there is one, deactivate it
if (active) {
active.classList.remove('active');
}
// Activate the new accordion, if it's not the one you just deactivated
if (active !== this) {
this.classList.add('active');
// Use scrollIntoView to adjust the window scroll position to show the content.
this.scrollIntoView({
behavior: 'smooth'
});
}
});
}
.accordion .header button {
text-align: left;
padding: 18px;
background: transparent;
border: none;
outline: none;
cursor: pointer;
width: 100%;
color: #444;
width: 100%;
transition: 0.4s;
}
/* Set the color according to the modifier class */
.accordion.gray button {
background-color: #eee;
}
.accordion.purple button {
background-color: #8461E8;
}
.accordion.active button,
.accordion button:hover {
background-color: #ccc;
}
.accordion .panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
/* Show the panel if the accordion is active */
.accordion.active .panel {
display: block;
}
.accordion button:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.accordion.active button:after {
content: "\2796";
}
<section>
<!-- Each accordion is wrapped by a div with the class 'accordion' -->
<!-- 'accordion' is the component, 'gray' is the color modifier -->
<div class="accordion gray">
<!-- h3 can contain a button -->
<h3 class="header">
<button>Alternators and regulators</button>
</h3>
<div class="panel">
<p>
First group of words go here.<br/> I'm afraid I just blue myself. No… but I'd like to be asked! Michael! It's called 'taking advantage.' It's what gets you ahead in life. Now, when you do this without getting punched in the chest, you'll have
more fun.
</p>
</div>
</div>
</section>
<section>
<!-- Use the 'purple' modifier class here -->
<div class="accordion purple">
<h3 class="header">
<button>Batteries and Inverters</button>
</h3>
<div class="panel">
<p>
Second set of words go here.<br/> Steve Holt! I don't criticize you! And if you're worried about criticism, sometimes a diet is the best defense. That's why you always leave a note! Well, what do you expect, mother? I don't criticize you! And
if you're worried about criticism, sometimes a diet is the best defense.<br/>
<br/> Across from where? As you may or may not know, Lindsay and I have hit a bit of a rough patch. Now, when you do this without getting punched in the chest, you'll have more fun. No… but I'd like to be asked!
</p>
</div>
</div>
</section>
<section>
<div class="accordion gray">
<h3 class="header">
<button>AC and DC Panels
</button>
</h3>
<div class="panel">
<p>
Third set of words go here.<br/> That's why you always leave a note! Not tricks, Michael, illusions. As you may or may not know, Lindsay and I have hit a bit of a rough patch. It's called 'taking advantage.' It's what gets you ahead in life.<br/>
<br/> Say goodbye to these, because it's the last time! First place chick is hot, but has an attitude, doesn't date magicians. I'm afraid I just blue myself. I'm afraid I just blue myself. I'm afraid I just blue myself.
</p>
</div>
</div>
</section>
Related
I've been trying for hours with this javascript navigation, I've researched many sites, including w3schools, codepen, and css tricks, and many others, I've spent hours reading through stack, and everything has helped a lot, now I'm almost finished, and I need some help making this menu work.
Essentially, it is a sub navigation menu that stays open when you click the down ARROW BUTTON and closes when you click anywhere on the page. Sometimes it works, and sometimes it doesn't.
The menu has two links:
Forum 1 / down ARROW BUTTON and
Forum 2 / down ARROW BUTTON
I can get Forum 1 down ARROW BUTTON to open the subnavigation sometimes, by clicking the down ARROW BUTTON, but I cannot get Forum 2 down ARROW BUTTON to trigger sub navigation at all.
I'm not sure if it is the way I have the css, or what.
I'm providing the full menu with css, html, and javascript,
Like I said, I can get the first down ARROW BUTTON to open the sub navigation sometimes, but that is about it. Can you help me get this working please?
Here is the styling for the navigation menu
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #18143c;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 7px 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: auto;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 5px;
background-color: inherit;
font-family: inherit;
margin: 0;
margin-right:26px;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: #46485c;
}
.subnav-content-1 {
display: none;
position: absolute;
left: 0;
background-color: #46485c;
width: 100%;
z-index: 1;
overflow:auto;
}
.subnav-content-1 a {
float: left;
color: white;
text-decoration: none;
padding: 10px 10px;
}
.subnav-content-1 a:hover {
background-color: #eee;
color: black;
}
.show {display: block;}
Here is the HTML for the navigation menu
<div class="navbar">
Forums 1
<div class="subnav">
<button onclick="myFunction()" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
<div id="myDropdown" class="subnav-content-1">
Test Main
Test link 1
Test link 1
Test link 1
</div>
</div>
Forums 2
<div class="subnav">
<button onclick="myFunction()" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
<div id="myDropdown" class="subnav-content-1">
Test Main
Test link 2
Test link 2
Test link 2
</div>
</div>
</div>
And here is the javascript
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.subnavbtn')) {
var dropdowns = document.getElementsByClassName("subnav-content-1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
here is a link to the page on W3schools where I've been working on this menu.
https://www.w3schools.com/code/tryit.asp?filename=GC3LUF0TLS6S
What I am trying to do is, get the menu working were, when you click the dropdown ARROW BUTTON, it opens the sub navigation menu, then to close sub navigation, you just click anywhere on the page.
This almost works!! Please help me get it working right.
Hi man I found a fix for you, I don't know if it is what you need but it gets that job done:
First change the id's for each dropdown as they are conflicting when js is called, then call that js function with a the id number of each dropdown:
<div class="navbar">
Forums 1
<div class="subnav">
<button onclick="**myFunction(1)**" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
<div id="**myDropdown1**" class="subnav-content-1">
Test Main
Test link 1
Test link 1
Test link 1
</div>
</div>
Forums 2
<div class="subnav">
<button onclick="**myFunction(2)**" class="subnavbtn"><i class="fa fa-caret-down"></i></button>
<div id="**myDropdown2**" class="subnav-content-1">
Test Main
Test link 2
Test link 2
Test link 2
</div>
</div>
</div>
Then you should add a parameter to you js function to know which dropdown to toggle:
function myFunction(n) {
document.getElementById("myDropdown"+n).classList.toggle("show");
}
I have looked everywhere possible as I am trying to develop a drop down button, but instead of options then the buttons display unordered list items, but when a user click off the button the the button does not close, but in order to close the button, then the button needs to be click again.
Down below you will find the way the button is when not clicked and the way the button appears when it has been clicked.
If you also go to the following website you will see an example of the button in action by click "See our list of websites"
Button on a website for example
Any help would be greatly appreciated and thanks in advance.
Here you go, key functions I used;
.click() for the a tag or the link, the function inside the .click() will be called.
.slideToggle() the ul after the click, this would hide or show the target element depending on its state.
Then add positon:absolute to the ul so that it wouldn't affect inline elements.
$(document).ready(function() {
$(".toggle-button").click(function() {
$(this).parent().find("ul").slideToggle(function() {
// Animation complete.
});
});
})
.links-unordered {
display: inline-block;
position: relative;
}
.links-unordered {
margin-top: 20px;
min-height: 30px;
}
.links-unordered .toggle-button {
text-decoration: none;
padding: 12px 16px 12px 16px;
transition: 0.2s;
border: 1px solid black;
}
.links-unordered .toggle-button:hover,
.links-unordered .toggle-button:active,
.links-unordered .toggle-button:focus,
.links-unordered .toggle-button:visited {
text-decoration: none;
color: black;
}
.links-unordered .toggle-button:hover {
border-width: 2px;
}
.links-unordered ul {
position: absolute;
top: 10px;
margin-top: 25px;
padding-inline-start: 20px;
}
.links-unordered ul li {
line-height: 25px;
padding-left: 15px;
}
.links-unordered a {
text-decoration: none;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links-unordered">
<a class="toggle-button" href="#">SEE OUR LIST OF WEBSITES</a>
<ul style="display:none;">
<li>cdn.sc.rockstargames.com</li>
<li>lifeinvader.com</li>
<li>rockstargames.com</li>
<li>socialclub.rockstargames.com</li>
</ul>
</div>
<div class="links-unordered">
<a class="toggle-button" href="#">SEE OUR LIST OF WEBSITES</a>
<ul style="display:none;">
<li>cdn.sc.rockstargames.com</li>
<li>lifeinvader.com</li>
<li>rockstargames.com</li>
<li>socialclub.rockstargames.com</li>
</ul>
</div>
I'm not sure if I understand what you want. But here's a sample of what you asked, a button that when you click, show a list. And when you click on an item, the list goes out and you have the item. Hope this helps you. It's a simple code, but if you have questions, go ahead and ask!!
function closeList(e) {
var site = e.target.innerText;
alert(site + ' clicked!!');
document.querySelector('#dvSites').style.display = 'none';
}
function showList() {
var dvSites = document.querySelector('#dvSites');
if (dvSites.style.display === '')
return; // already visible
dvSites.style.display = '';
}
// Add eventListener to close the div
var lis = document.querySelector('#dvSites').querySelectorAll('li');
for(var i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', closeList);
}
// Add eventListener to open the div
document.querySelector('#btnShow').addEventListener('click', showList);
<button id="btnShow">Show sites!!</button>
<div id="dvSites" style="display: none">
<ul>
<li>stackoverflow.com</li>
<li>www.google.com</li>
<li>www.sipmann.com</li> <!-- :) -->
</ul>
</div>
I would like my accordion to scroll the page when opened.
Here is the code,
<button class="accordion">Services We Offer</button>
<div class="panel">
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
<p>
<strong>PC Repairs</strong> - CCC Digital Solutions offers a PC repair
service. Users can enquire about prices for PC repairs and get rough
estimates on how much it will cost. Users will also find a FAQ guide on how
to attempt to repair their PC themselves. Click <a href= "pcRepairs.html"
title="PC Repairs" target="_blank">HERE</a> to go to the PC Repairs page.
<br />
<br />
<strong>Digital Graphics</strong> - CCC Digital Solutions offers a Digital
Graphics service. Users can enquire and get in contact about personal
graphics to be made or they can view tutorials on how to make graphics and
how to effectively use photoshop. Click <a href="digitalGraphics.html"
title="Digital Graphics" target="_blank">HERE</a> to go to the Digital
Graphics page.
<br />
<br />
<strong>Website Development</strong> - CCC Digital Solutions offers a
Website Development service. Users can view this page to find prices for
website development or they can find links to the W3Schools website which
will teach them basic and advanced website development. Click <a
href="websiteDevelopment.html" title="Website Development"
target="_blank">HERE</a> to go to the Website Development page.
<br />
<br />
<strong>Website Maintenance</strong> - CCC Digital Solutions offers a
Website Maintenance service. Users can view this page and find guides and
tips on how to maintain a website that has been created. Click <a
href="websiteMaintenance.html" title="Website Maintenance"
target="_blank">HERE</a> to go to the Website Maintenance page.
<br />
<br />
<strong>Training Courses</strong> - CCC Digital Solutions offers a Training
Courses service. Users can view this page and find out what courses are
available and what each course will roughly cost. Click <a
href="trainingCourses.html" title="Training Courses"
target="_blank">HERE</a> to go to the Training Courses page.
</p>
</div>
Basically, I have a parallax image and when the user scrolls down the page the accordion shows. When the accordion is opened at the bottom of the page it overlaps the page and doesn't show the contents unless the user scrolls down.
I would like the accordion to automatically scroll the page so the user can see the contents.
CSS Code
.parallax {
/* The image used */
background-image: url("images/collegecampus.jpg");
/* Set a specific height */
height: 660px;
width: auto;
left: 0;
right: 0;
top: 0;
padding-left: 0cm;
padding-right: 0cm;
border-left: 0;
margin: 0;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
background-color: #5e1969;
color: #ddd;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active
class with JS), and when you move the mouse over it (hover) */
button.accordion.active {
background-color: #5e1969;
color: #ddd;
}
button.accordion:hover {
background-color: #ddd;
color: #5e1969;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
button.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I would like to handle several elements that require a specific functionality in our development stage for toggle-like buttons that open and close divs. I say toggle-like because it isn't your standard toggle setup.
The code I have works for a single instance of the buttons and container. Now I need to learn how to apply this to a dozen more which should function independent of each other.
This fiddle shows four examples where the first CSS button is the only one working.
https://jsfiddle.net/e2fexbqp/12/
This is the code that is creating the working example of a single block - two buttons and our div - which should be functional for several other button / div areas.
HTML
<a class="button" id="open">Open</a>
<div id="click-drop" style="display:none">
<h2>Hello World</h2>
<p>You can see me! I'm open! Type your code below.</p>
<textarea></textarea>
<p><a class="button" id="close" style="display:none">Close</a></p>
</div>
Javascript
var open = document.getElementById("open");
var close = document.getElementById("close");
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
function hideButton() {
var x = document.getElementById("open");
x.style.display = "none";
var x = document.getElementById("close");
x.style.display = "";
}
function showButton() {
var x = document.getElementById("open");
x.style.display = "";
var x = document.getElementById("close");
x.style.display = "none";
}
open.onclick = function() {show('click-drop');hideButton()}
close.onclick = function() {hide('click-drop');showButton()
I would like something clean and concise as well as unobtrusive.
This demo is pure JavaScript as it is indicated in the tags and implied by the provided code in the question. It has only one eventListener and multiple event.targets BTW, unique ids can only be given to one element. You cannot have multiple ids with the same value. So you'll notice I used only classes no ids.
Advantages
Pure JavaScript and no dependencies on plugins.
Cross-browser with modern browsers.
Having to use only one eventListener is very memory efficient.
It determines exactly which button is clicked without creating an array, or NodeList to iterate through in a loop.
Disadvantages
If you need to be compatible with IE9, then classList has to be replaced with className.
The HTML layout must be in strict pattern. Key elements must be positioned in a predetermined sequence. That's not much of a problem if you have a habit of making organized patterns in markup.
Step by step description is commented in the source.
FIDDLE
SNIPPET
// Reference the parent element
var box = document.querySelector('.box');
// add an eventListener to parent
box.addEventListener('click', toggleBtn, false);
function toggleBtn(event) {
/* This will prevent the <a>nchors from
behaving like normal anchors which
jump from one location to another
*/
event.preventDefault();
// event.target is the element that was clicked (.open/.close .button)
// event.currentTarget is the element that listens for an event (.box)
if (event.target != event.currentTarget) {
var clicked = event.target;
/* If the clicked element has .open class
find the sibling element that was before it and
show it by adding .show class and removing .hide
Then hide clicked element.
*/
if (clicked.classList.contains('open')) {
var drop = clicked.previousElementSibling;
drop.classList.remove('hide');
drop.classList.add('show');
clicked.classList.remove('show');
clicked.classList.add('hide');
} else {
/* Else find clicked parent and hide it
and then show the parent's sibling that is after it.
*/
var drop = clicked.parentElement;
var open = drop.nextElementSibling;
drop.classList.remove('show');
drop.classList.add('hide');
open.classList.remove('hide');
open.classList.add('show');
}
}
/* This prevents the bubbling phase from continuing
up the event chain and triggering any unnecessary
eventListeners
*/
event.stopPropagation();
}
* {
/* Prefix no longer needed */
box-sizing: border-box;
}
.box {
/* Just for demo */
border: 1px dashed red;
}
.button {
text-decoration: none;
font-size: 13px;
line-height: 26px;
height: 28px;
width: 48px;
margin: 0;
padding: 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
/* Prefix no longer needed for years */
border-radius: 3px;
text-align: center;
}
.click-drop {
border: solid 1px;
border-radius: 3px;
padding: 10px 25px;
}
.hide {
display: none;
}
.show {
display: block;
}
.button.show {
display: inline-block;
}
.close {
display: block;
}
<!--[The order in which elements are positioned is important which will be evident when you review the JavaScript]-->
<!--.box is the 'ancestor/parent' element and event.currentTarget-->
<section class="box">
<h1>Header Content</h1>
<!--Each .click-drop is initially hidden hence it has .hide as a class as well-->
<div class="click-drop hide">
<!--All descendants/children of each .click-drop inherits display:none prop/val from .click-drop.hide-->
<p>Header style</p>
<textarea></textarea>
<a class="close button">Close</a>
</div>
<!--Each .open.button follows it's corresponding .click-drop-->
<a class="open button show">CSS</a>
<div class="click-drop hide">
<p>Header content</p>
<textarea></textarea>
<a class="close button">Close</a>
</div>
<a class="open button show">HTML</a>
<h1>Footer Content</h1>
<div class="click-drop hide">
<p>Footer style</p>
<textarea></textarea>
<a class="close button">Close</a>
</div>
<a class="open button show">CSS</a>
<div class="click-drop hide">
<p>Footer content</p>
<textarea></textarea>
<a class="close button">Close</a>
</div>
<a class="open button show">HTML</a>
</section>
Use event target to style the individual element that got clicked.
anchors = doc.getElementsByClassName("button");
for (var i = 0; i < anchors.length; i++) {
anchors[i].addEventListener("click", function(e){
e.target.classList.toggle('hide');
});
}
Let's explain some points :
IDs in HTML, in a page, shall be unique.
Using classes and jQuery you can achieve this pretty much easily.
I added a span over all the "open button + its corresponding zone" that I set a "zone" class
I put an "open" class to all open links.
I put a "close" class to all close links.
I registered the click for '.zone .open' elements so they hide themselves and show the contained DIV in their parent.
I registered the click for '.zone .close' elements so they hide the DIV under '.zone' element containing them and show the '.open' link under them.
So here is what I've done :
https://jsfiddle.net/e2fexbqp/13/
$(document).ready(function() {
$('.zone .open').click(function() {
$(this).hide();
$(this).parent().find('div').show();
});
$('.zone .close').click(function() {
var parent = $(this).parents('.zone');
parent.children('div').hide();
parent.children('a.open').show();
});
});
.button {
display: inline-block;
text-decoration: none;
font-size: 13px;
line-height: 26px;
height: 28px;
margin: 0;
padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.zone div {
border: solid 1px;
border-radius: 3px;
padding: 10px 25px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Header Content</h1>
<span class="zone">
<a class="button open">CSS</a>
<div>
<p>Header style</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
</div>
</span>
<span class="zone">
<a class="button open">HTML</a>
<div>
<p>Header content</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
</div>
</span>
<h1>Footer Content</h1>
<span class="zone">
<a class="button open">CSS</a>
<div>
<p>Footer style</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
</div>
</span><span class="zone">
<a class="button open">HTML</a>
<div>
<p>Footer content</p>
<textarea></textarea>
<p><a class="button close">Close</a></p>
</div>
</span>
My toggle control is working, but I would like to add a plus-minus button: when content appears it becomes "-" and when content is hidden it changes to "+". Can you help please?
<div class='toggle'>
<h2>Read More</h2>
<div class="togglebox">
<div class="content">
<h3>
<p>
A new exciting way to broadcast your business to customers
A new exciting way to broadcast your business.Lorem ipsum
</p>
</h3>
<!--Content Here-->
</div>
</div>
</div>
<script>
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
</script>
I have modified your script. You can try this
<script>
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).next(".togglebox").css("display");
if(x=="block")
$(this).text("+ Read More");
else
$(this).text("- Read More");
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
</script>
Please check out following tutorial easy toggle jquery tutorial
You have to use css to change the header with + or -
HTML
<h2 class="trigger">Toggle Header</h2>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>
<!--Content-->
</div>
</div>
css
h2.trigger {
padding: 0 0 0 50px;
margin: 0 0 5px 0;
background: url(h2_trigger_a.gif) no-repeat;
height: 46px;
line-height: 46px;
width: 450px;
font-size: 2em;
font-weight: normal;
float: left;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
margin: 0 0 5px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 500px;
clear: both;
}
.toggle_container .block {
padding: 20px; /*--Padding of Container--*/
background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}
jquery
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
});
});
I made an example of an expandable list that has exactly that, maybe is useful:
http://jasalguero.com/ledld/development/web/expandable-list/
Create a new element and insert it after the "Read More" heading:
var expand_button = document.createElement("A");
expand_button.attr("href", "#");
$(expand_button).text("+");
$(expand_button).click(function(event){
event.preventDefault();
$(".togglebox").slideToggle("slow");
if ($(".togglebox").is(":visible")) {
$(this).text("-");
} else {
$(this).text("+");
}
});
$(expand_button).insertAfter("h2");