Div hide show with back button display at header - javascript

Guys I have a problem in div selection. I have to use lot of dives in my code. but at the same time I have back button at header so i want that back button pressed then I move to back div.
here is my java script code.
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
hideAllBut(id);
}
function hideAllBut(id) {
var lists = document.querySelectorAll('.list');
for (var i = lists.length; i--;) {
if (lists[i].id != id) {
lists[i].style.display = 'none';
}
}
}
</script>
And Here is my html code example.
<style>
body{
}
#list1 {background-color: coral;}
#list2 {background-color: #45cd2a;}
#list3 {background-color: #ab4d2a;}
</style>
<form action="????" >
<button> Go to back div</button>
</form>
List One
List Two
<input type="button" value="List Four" onclick="toggle_visibility('list3');">
</input>
<div id="list1" class="list" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<div id="list2" class="list" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<div id="list3" class="list" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
</body>
</html>
This code works fine but i don't know how to implement a back button to go back div..??
kindly help me.


Try this :
Html :
<body>
<button onclick="back()"> Go to back div</button>
<form action="????" >
</form>
List One
List Two
<input type="button" value="List Four" onclick="toggle_visibility('list3');">
</input>
<div id="list1" class="list" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<div id="list2" class="list" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<div id="list3" class="list" style="display:none;">
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
</body>
jS:
var divHistory=new Array();
function back(){
if(divHistory.length>0){
var id=divHistory.pop();
var curId=document.getElementById(id);
curId.style.display = 'none';
alert(id);;
if(divHistory.length>0){
id=divHistory.pop();
var prevId=document.getElementById(id);
prevId.style.display = 'block';
}
}
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
hideAllBut(id);
divHistory.push(id);
}
function hideAllBut(id) {
var lists = document.querySelectorAll('.list');
for (var i = lists.length; i--;) {
if (lists[i].id != id) {
lists[i].style.display = 'none';
}
}
}

Related

Change button inner text on click in a function that hides/shows all elements with class

Found a way to show/hide all elements with class, but I need to change the button text on click from Hide to Show, than back again from Show to Hide. This is my JS code so far:
document.getElementById("hide").onclick = function() {
var o = document.getElementsByClassName("details");
for ( var i = 0; i < o.length; i++ ) {
if (o[i].style.display == 'none') {
o[i].style.display = 'block';
} else {
o[i].style.display = 'none';
}
}
}
Works as expected, so it hides and shows the elements with class, but I am not able to add the inner text change for the button. This is my html:
<button id="hide">Hide</button>
<ul>
<li>
<h3>First Item</h3>
<ul class="details">
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
</ul>
</li>
<li>
<h3>Second Item</h3>
<ul class="details">
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
</ul>
</li>
<li>
<h3>Third Item</h3>
<ul class="details">
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
</ul>
</li>
</ul>

Updated your code, run the script below.
I took your button and targeted the innerHTML. More info here.
document.getElementById("hide").onclick = function() {
var o = document.getElementsByClassName("details");
var btn = document.getElementById("hide");
for ( var i = 0; i < o.length; i++ ) {
if (o[i].style.display == 'none') {
o[i].style.display = 'block';
btn.innerHTML = "Hide";
} else {
o[i].style.display = 'none';
btn.innerHTML = "Show";
}
}
}
<button id="hide">Hide</button>
<ul>
<li>
<h3>First Item</h3>
<ul class="details">
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
</ul>
</li>
<li>
<h3>Second Item</h3>
<ul class="details">
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
</ul>
</li>
<li>
<h3>Third Item</h3>
<ul class="details">
<li>Detail 1</li>
<li>Detail 2</li>
<li>Detail 3</li>
</ul>
</li>
</ul>

This should do it;
document.getElementById("hide").onclick = function() {
var o = document.getElementsByClassName("details");
for ( var i = 0; i < o.length; i++ ) {
if (o[i].style.display == 'none') {
o[i].style.display = 'block';
this.innerText='hide';
} else {
o[i].style.display = 'none';
this.innerText='show';
}
}
}

Load content on anchor link click

I have content that is hidden by default. On button click, I want the selected one to show its content. I.e if find more is clicked on the second div, show the content for that div.
Approach so far:
function showClass(a) {
var e = [];
var e = document.getElementsByClassName(a);
for (elem of e) {
if (!elem) return true;
if (elem.style.display == "none") {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
return true;
}
.list {
display: none;
}
a {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</div>
<div class="list">
<ul>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
<div class="list">
<ul>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
</ul>
</div>
<a onclick="showClass('list');" class="loadMoreBtn">Find out more</a>
Where am I going wrong?

You have a few issues:
You should use document.getElementsByClassName(a); (note the document)
To iterate through a HTMLCollection (returned by getElementsByClassName) you should use .forEach, for...of or a regular for loop. for...in is not a recommended way to iterate a collection as it is made to iterate over properties in an object. Thus, the for..in loop can give unexpected properties of the HTMLCollection such as its length when using it to iterate (when instead all you're after is the node)
function showClass(a) {
// var e = []; <-- no need for this \/ redeclared below
var e = document.getElementsByClassName(a);
for (elem of e) {
if (!elem) return true;
if (elem.style.display == "none") {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
return true;
}
.list {
display: none;
}
a {
cursor: pointer;
}
<div>
<ul class="list">
<p>sample text</p>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</div>
<div>
<ul class="list">
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
<div>
<ul class="list">
<p>sample text</p>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
</ul>
</div>
<a onclick="showClass('list');" class="loadMoreBtn">Find out more</a>
To have separate buttons for each item/div you can give each item an id, and then toggle the id by passing it through as an argument:
function showClass(id) {
var elem = document.getElementById(id);
var visible = getComputedStyle(elem).display == "block";
if (!visible) {
elem.style.display = "block"
} else {
elem.style.display = "none"
}
}
.list {
display: none;
}
a {
cursor: pointer;
}
<div>
<ul class="list" id="list-one">
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</div>
<div>
<ul class="list" id="list-two">
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
<div>
<ul class="list" id="list-three">
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
</ul>
</div>
<a onclick="showClass('list-one');" class="loadMoreBtn">Find out more - Item 1</a>
<br />
<a onclick="showClass('list-two');" class="loadMoreBtn">Find out more - Item 2</a>
<br />
<a onclick="showClass('list-three');" class="loadMoreBtn">Find out more - Item 3</a>

Since you've tagged the question with jQuery and you're including it, you should really use it for this since it's very simple, concise and readable code...
function toggleClass(className) {
$("." + className).toggle();
}
.list {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<div>
<ul class="list">
<p>sample text</p>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</div>
<div>
<ul class="list">
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
<div>
<ul class="list">
<p>sample text</p>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
</ul>
</div>
<a onclick="toggleClass('list');" class="loadMoreBtn">Find out more</a>
As you can see, jQuery has a toggle() method that toggles visibility, and jQuery methods work on arrays of elements by default, so you don't need a loop and you don't need to check the current visible state of anything.
You could also go a bit further and assign the event handler in Javascript, rather than inline in the anchor element, like this...
$(".loadMoreBtn").on("click", function() {
$(".list").toggle();
});
Keeping your Javascript out of HTML is encouraged, as it means you don't have to hunt different files to find it, which is great for both you and anyone else that ever has to look at your code.

Please have look at below code i have madden few changes in your code
function showClass(a) {
var e = [];
var e = document.getElementsByClassName(a);
console.log(e);
for (i=0;i<=e.length;i++) {
if (!e[i]) return true;
e[i].classList.add("displayblock");
}
return true;
}
function removeClass(a) {
var e = [];
var e = document.getElementsByClassName(a);
console.log(e);
for (i=0;i<= e.length;i++) {
if (!e[i]) return true;
e[i].classList.remove("displayblock");
}
return true;
}
Styles
.list {
display: none;
}
a {
cursor: pointer;
}
.displayblock{
display: block;
}
HTML
<div>
<ul class="list">
<p>sample text</p>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</div>
<div>
<ul class="list">
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
<div>
<ul class="list">
<p>sample text</p>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
</ul>
</div>
<a onclick="showClass('list');">Find out more</a>
<a onclick="removeClass('list');">Hide more</a>
Share your improve reference

Read the error messsage,
Uncaught ReferenceError: getElementsByClassName is not defined
The actual method you are looking for is window.document.getElementsByClassName

Collapse other Div on click

The class .notshow is hidden by default and i want the div with .notshow class to be visible after clicking the Show It text inside .shownow class.
I created a jquery code but its not working.
When i click .shownow div all hidden div with .notshow class go visible.
I only want a single div with .notshow class to be visible .
Example: I want to show single div with class .notshow to be visible and if i click another div the previous div should be hidden.
Its Similar to accordion.
*I searched alot on internet but can't find any solution similar to this.
Thanks for help
JsFiddle: https://jsfiddle.net/yoxo5kfh/3/
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>

For this, we have to target which one you want to show, we can target it by combining..
$(this) - the element you click.
.closest - parent of both the element.
if you want some animation to use .slideDown insted of .show() and .slideUp insted of .hide()
$('body').on('click', '.shownow', function() {
$('.notshow').removeClass('nohide');
$(this).closest('.main').find('.notshow').addClass('nohide').toggle();
$('.notshow').each(function() {
if(!$(this).hasClass('nohide')){
$(this).hide();
}
});
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>

try the code below. It will remove the class from all notshow and show the closest notshow to the clicked element
Updated fiddle here.
$('.shownow').click(function() {
$(".notshow").removeClass("show")
$(this).parent().next(".notshow").addClass("show");
})

A simple show/hide using JQuery. Try the below code, when you click on 'Show It', it finds the '.notshow' in the current parent container and accordingly hides the other containers:
$('.shownow').click(function() {
$(this).parents(".main:first").find(".notshow").toggle();
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.shownow h4 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>

At last got somethig will be able for you
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<p class="shownow"><h4>Show It</h4><p>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
<script>
var elms = $( "div.notshow" )
$(document).on("click", ".title", function(event){
event.preventDefault();
$('.notshow').removeClass('show');
$(this).closest('div').next('.notshow').addClass('show');
});
</script>

let x = document.querySelectorAll('.main');
let list = document.querySelectorAll('.notshow')
let length = x.length;
for (let i = 0; i < length; i++) {
x[i].onclick = () => {
if (list[i].classList.contains('show')) {
list[i].classList.toggle('show');
} else {
for (let x = 0; x < length; x++) {
list[x].classList.remove('show');
}
list[i].classList.toggle('show'); // toggle/add
}
}
}
//let x = document.querySelectorAll('.main');
//let list = document.querySelectorAll('.notshow')
//let length = x.length;
//for (let i = 0; i < length; i++) {
// x[i].onclick = () => {
// list[i].classList.toggle('show'); // toggle/add
// }
//}
.notshow{
display:none;
}
.catlist{
list-style:none;
}
.show{
display:block;
}
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>

I have update my answer, This will help you, just add it to your code.
<style type="text/css">
.notshow{
display: none;
}
</style>
<script type="text/javascript">
$(document).on('click','.shownow', function(){
var this_display = $
(this).parent().next('.notshow').css('display');
$('.notshow').css('display','none');
if(this_display=="block"){
$(this).parent().next('.notshow').css('display','none');
}else{
$(this).parent().next('.notshow').css('display','block');
}
});
</script>

How to wrap all `ul` elements in `div` with JQuery automatically?

How to wrap all ul elements in div with JQuery automatically?
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>
But what I want:
<div id="my_uls">
<div>
<ul>
<li>Item one</li>
<li>Item two
<div>
<ul>
<li>Item one of two</li>
</ul>
</div>
</li>
</ul>
</div>
</div>

You need to use .wrap():
$(function() {
$("ul").wrap("<div />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_uls">
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Item one of two</li>
</ul>
</li>
</ul>
</div>

Just use wrap function for this
<scrpt>
$(document).ready(function(){
var myuls = $("#my_uls").find("ul");
for(var i=0;i<myuls.length;i++){
$(myuls[i]).wrap("<div></div>");
}
});
</script>

$('#my_uls ul'), This will refer all your ul inside the div.
if you need the 1st ul only
$('#my_uls ul:not(#my_uls ul ul)').

Grid View List View Toggle

I currently have a page that lists products in a list format. I would like to be able to toggle between the two views. The list is populated dynamically.
Below there is a static ul, and I would like to populate it dynamically:
$('button').on('click', function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
} else if ($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
<div id="container">
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>

<script type="text/javascript">
$(document).ready(function() {
$("a.switcher").bind("click", function(e) {
e.preventDefault();
var theid = $(this).attr("id");
var theproducts = $("ul#products");
var classNames = $(this).attr('class').split(' ');
if ($(this).hasClass("active")) {
return false;
} else {
if (theid == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
$("#listview").children("img").attr("src", "images/list-view.png");
var theimg = $(this).children("img");
theimg.attr("src", "images/grid-view-active.png");
theproducts.removeClass("list");
theproducts.addClass("grid");
} else if (theid == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
$("#gridview").children("img").attr("src", "images/grid-view.png");
var theimg = $(this).children("img");
theimg.attr("src", "images/list-view-active.png");
theproducts.removeClass("grid")
theproducts.addClass("list");
}
}
});
});
</script>
<table style="float: right;">
<tr>
<td>
<a href="#" id="gridview" class="switcher">
<img src="images/grid-view.png" alt="Grid">
</a>
</td>
<td> </td>
<td>
<a href="#" id="listview" class="switcher active">
<img src="images/list-view-active.png" alt="List">
</a>
</td>
</tr>
</table>

Categories

Resources