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>
Related
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';
}
}
}
I have tried this CSS, but when you click on the fist link the other two will move at the bottom, same for the other links.
I have tried to change the initial code and put the links in one class, but I don't know that much JavaScript, so probably my modifications are very wrong.
How can I move the links on one line ? So that when you click on one link the toggled list appears without affecting the link position, so all the links will still be on one line.
HTML
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Javascript
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
CSS
.dropdown{
display:inline-block;
}
Initial code
http://jsfiddle.net/6t6BP/4/
Modified by me code
https://jsfiddle.net/Lavi2/yyfhrss0/
One solution would be to make the dropdown-container to not push elements down. You can do that, in your case, with position:absolute and position it relative to the link that triggers it.
P.S. that is not just javascript, it's jQuery.
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
position:relative
}
.dropdown-container {
position:absolute;
left:0;
top:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Full code example
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
vertical-align:top;
}
.dropdown-container ul{
list-style:none;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
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>
I want to add a class to the preceding h3 element whenever any of the li under it being clicked, here is my html:
<div class="list">
<div class="marketing">
<h3> List I</h3>
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
<div class="operations">
<h3> List II</h3>
<div>
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
</div>
</div>
</div>
I tried to use the following script but in vain.
$('.list li').click(function () {
$(this)parent().prev('h3').addClass('active');
);
or either
$('.list li').click(function () {
$(this).parent().parent().children('h3')addClass('active');
);
Any idea?
use:
$(this).closest('div').prev('h3').addClass('active');
or
$(this).closest('div').siblings('h3').addClass('active');
Use this
$('.list li').click(function () {
$(this).parent().parent().prev().addClass('active');
});
DEMO
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';
}
}
}