Develop Reference

Trying to toggle 2 divs

I've found lots of answers for toggling divs, but none are quite doing what I'm looking for. I want to have 2 buttons (grid & list views). When the page loads, the grid div is visible. If someone clicks the list view button, the grid div will go to display: none, and the list div will display:block. If you happen to click the list view button again while the list div is already displayed, nothing would happen. But if you click on the grid view button, the divs would toggle again, and vice versa.
All I've managed to accomplish is that clicking on the "list view" button displays that div, but it does not make the grid view disappear. Only clicking on the grid view button makes the grid disappear. I'm sure there's a logic I'm completely missing here, and I apologize for having a fried brain right now. But I'm just getting frustrated.
Here's my code:
jQuery(function(){
jQuery('.showSingle').click(function(){
var objdiv = $('#div'+$(this).attr('target'));
var toggleDisplay = false;
if(objdiv.css('display')=="none"){
toggleDisplay = true;
}
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).toggle(toggleDisplay);
});
});
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-grid gap-2 d-md-block">
<a class="btn btn-primary showSingle" target="1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
<a class="btn btn-primary showSingle" target="2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
</div>
<div id="div1" style="display: block;">
Grid View Here
</div>
<div id="div2" style="display: none;">
List view here
</div>
Thanks in advance.

The logic you're using is more complex than it needs to be. All you need to do when a button is clicked is hide all the #divN elements, which can be done most simply by adding a common class to them, then showing the one related to the button which was clicked.
To target the div related to the button you can put the id selector in the href attribute of the a element. Try this example:
jQuery($ => {
$('.showSingle').click(e => {
e.preventDefault();
$('.content').hide();
let targetSelector = $(e.currentTarget).attr('href');
$(targetSelector).show();
});
});
.content { display: none; }
#div1 { display: block; }
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-grid gap-2 d-md-block">
<a class="btn btn-primary showSingle" href="#div1" data-bs-toggle="button" aria-pressed="true"><i class="fas fa-th-large"></i></a>
<a class="btn btn-primary showSingle" href="#div2" data-bs-toggle="button" aria-pressed="false"><i class="fas fa-list"></i></a>
</div>
<div class="content" id="div1">Grid View Here</div>
<div class="content" id="div2">List view here</div>

Create toggle menu raw javascript

I'm a little confused about how create a menu with raw javascript, pretty similar like bootstrap dropdown with those interactions:
click on button and show dropdown
click again and hide dropdown
lose focus on dropdown and hide it
I was doing a series of tests and I couldn't find how bootstrap do it!
Somebody has any idea of how does it work?
This what I have:
HTML:
<!-- Menu button -->
<div class="flex align-items-center menu-btn">
<i class="material-icons task-more flex justify-content-center align-items-center" data-toggle="hola">more_horiz</i>
</div>
<!-- Menu -->
<div class="task-menu">
<div class="task-menu-item flex align-items-center">
<i class="material-icons">alarm</i>
<span>Alarms</span>
</div>
<div class="task-menu-item flex align-items-center">
<i class="material-icons">edit</i>
<span>Edit</span>
</div>
<div class="task-menu-item flex align-items-center">
<i class="material-icons">delete</i>
<span>Delete</span>
</div>
</div>
JS:
// Show-hie menu
Array.from(container.querySelectorAll('.task-more')).forEach(function(el){
el.addEventListener('click', function(){
let menu = el.parentNode.parentNode.querySelector('.task-menu');
menu.classList.toggle('display-block');
menu.tabIndex = -1;
menu.focus();
});
});
// Hide on blur
Array.from(container.querySelectorAll('.task-menu')).forEach(function(el){
el.addEventListener('blur', function(){
el.classList.remove('display-block');
}, true);
});
Thanks!

<button id="drop" onclick="drop();">Drop down</button>
<div id="menu">
<!-- content here-->
</div>
Script:
var button = document.querySelector('#drop');//or any other selector like getElementBy...
var menu = document.querySelector('#menu');
function drop() {
setTimeout(function() {
menu.style.display="block";
button.setAttribute('onclick', 'hide();');
}, 10);
};
function hide() {};
document.addEventListener('click', function() {
menu.style.display="none";
});

Using the #href convention in javascript

document.getElementById('otherButton').addEventListener('click', function () {
document.getElementById("step-4").style.display = 'block'
});
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>
I am using this example (shown above) as a guide for html and css on my webpage. In the example, we see that clicking on the button whose href=#step4 will display the div with id step-4
In javascript, if I want to open this exact same div on click, how would I do this ? For your reference, the css page is here
document.getElementById('otherButton').addEventListener('click', function () {
document.getElementById("step-4").style.display = 'block'
});
doesn't work. What am I doing wrong here?

The CSS trick the example uses is that it looks at the :target pseudo-class.
When you click on the anchor, the fragment-identifier is set as the hash of your page, and your step-4 element is then the one which matches this selector, activating the transform: translateX(0) rule, which will make the element visible.
So what you want is actually to trigger the :target pseudo-class programmatically.
And this can be achieved by manipulating the location.hash property.
btn.onclick = e => {
location.hash = "myDiv";
}
div:target{
color: red;
}
<div id="myDiv">Hello</div>
<button id="btn">click me</button>
Or with your example:
document.getElementById('otherButton').addEventListener('click', function () {
location.hash = 'step-4';
});
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>

The problem is not that the display is none, or that visibility is set to hidden. The problem is that the div has a class called 'offcanvas-left' that translates it off the canvas (and the canvas has overflow set to hidden). If you want to signal the div coming into view you can translate it right or simply remove the class 'offcanvas-left'.
document.getElementById('otherButton').addEventListener('click', function () {
document.getElementById("step-4").classList.remove('offcanvas-left');
});
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate'>
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>

You will need to have style like attribute in your html tag if you wanna to access it.
Here is example :
document.getElementById('otherButton').addEventListener('click', function () {
alert(document.getElementById("step-4").style.display)
document.getElementById("step-4").style.display = 'none';
} , false);
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet"/>
<div class='col12 pad4 contain fill-navy dark clip'>
<div class='center quiet'>Map Canvas</div>
<div class='pin-right pad2'>
<a href='#step-4' class='button'>Trigger</a>
</div>
<div id='step-4' class='col4 pad2 fill-darken1 pin-left offcanvas-left animate' style="display:block;">
<a href='#' class='fill-darken2 pad1 icon close'></a>
</div>
</div>
<div id='otherButton' class='button'>otherButton</div>

jquery expand/collapse not working right

I just joined forum moments ago when I got real frustrated. I've been trying to work out a problem I found but haven't been able to solve myself.
So i'm building expand/collapse style menu where I have two items (two titles). When I click one of the titles, the item and its content is being expanded. When I click it again, it gets collapsed. It's just the way I want it to work.
The problem is that 'master' button which works as "Show all" or "Hide all". It isn't working like I want it to work. So when I click it once, all items are displayed and when I click it again all items are being hidden.
The problem is when I click one of the items open and THEN click "Show all" button, then that already opened element is being hid and element being before hidden is now being shown. How to proceed from here?
My code is here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<!-- BOOTSTRAP CORE STYLE -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary">Show all</button>
<br>
<script>
$(document).ready(function(){
$(".btn-primary").click(function(){
$(".panel-collapse").collapse('toggle');
var $this = $(this);
$this.toggleClass('.btn-primary');
if($this.hasClass('.btn-primary')){
$this.text('Hide all');
} else {
$this.text('Show all');
}
});
});
</script>
<br>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">First collapse</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">First content</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Second collapse</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Second content</div>
</div>
</div>
</div>
</div>
<!--CORE SCRIPTS PLUGIN-->
<script src="assets/js/jquery-1.11.1.min.js"></script>
<!--BOOTSTRAP SCRIPTS PLUGIN-->
<script src="assets/js/bootstrap.js"></script>
</body>
</html>
Please note: There are few scripts that have local paths because I couldn't get global links (hyperlinks) to work here... don't really know why.
I know everything here is pretty messed up, i'm not a native English speaker but I hope you understand what I'm struggling with.
Thanks in advance. Any help is appreciated! :)

try next code :
$(document).ready(function(){
let $button =$(".btn-primary");
$button.click(function(){
$(".panel-collapse").toggle()
var $this = $(this);
$this.toggleClass('.btn-primary');
if(!$this.hasClass('.btn-primary')){
$this.text('Hide all');
} else {
$this.text('Show all');
}
});
});
But I reccomend use custom class or id for identify buttons or others elements, because page can has many elements with similar bootstraps classes.For toogle text in button you need use variable.

Trouble getting index of class with jQuery

I have a few hidden modals on a page that I want to control with a single block of javascript code.
I'm trying to test to see if I'm getting the correct close button with class close, but my console.log is currently printing -1.
HTML
<span class="open">Button A</span>
<span class="open">Button B</span>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal">
<!--modal content-->
<div class="modal-content">
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
JS
$(document).ready( function() {
//when a class '.open' is clicked
$('.open').click(function(){
//store the index of the clicked span in a variable
var indexer = $('.open').index(this);
//test output - working
console.log("open. " + indexer);
//store all classes '.close' in a variable
var close = $('.close');
//store '.close' with same index as clicked button
var closeindex = $('.close').index(indexer);
console.log(closeindex);
});
});
I'm trying to walk through this click function and assign each class with the correct index to a variable, and I'm using console.log to print the indexes to the console.
With console.log(closeindex), I'm trying to get the index of the close button that has a matching index of span .open that was clicked, but currently it's returning -1.
I want to eventually do something like:
close.click = function() {
$('.modal').index(indexer).style.display = "none";
}

var closeindex = $('.close').eq(indexer);
Ok, so if you have a relationship between open and close such that the 3rd open related to the 3rd close, then you can get the related close by using the eq() method as above.
eq() will get you the element at that index, keeping it as a jQuery object.

If you're trying to open and close modal dialogs based on the buttons, I'd like to suggest an alternative method to indexes. With indexes, any refactoring/reordering of your elements is liable to throwing your code off entirely.
Consider using data attributes to keep track of what modal each open button is referring to. That way, no matter where your button/modals are, they are permanently linked.
If you give each modal an ID, and then add that ID to a data attribute on your open button...
<span class="open" data-modal="modal1">Open Modal 1</span>
<div class="modal" id="modal1"></div>
...then you can easily relate open buttons to their proper modals.
The close buttons can simply say "Close my parent modal" when clicked. We can do this using .closest( selector ) which traverses upwards in the DOM to find the first matching ancestor.
Working Example:
$(".open").on("click", function() {
$(".modal").hide(); //Hide all open modals
var modalId = $(this).data("modal"); //Get the Modal ID from the data-modal attribute
var $modal = $("#" + modalId); //Select the modal with that ID
$modal.show(); //Show it
});
$(".close").on("click", function() {
$(this).closest(".modal").hide(); //Close the closest modal (ancestry-wise)
});
div.modal {
display: none;
padding: 50px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="open" data-modal="modal1">Button A</span>
<span class="open" data-modal="modal2">Button B</span>
<!--modal-->
<div class="modal" id="modal1">
<!--modal content-->
<div class="modal-content">
I'm modal 1!
<!--close button-->
<span class="close">×</span>
<!--content A-->
</div>
</div>
<!--modal-->
<div class="modal" id="modal2">
<!--modal content-->
<div class="modal-content">
I'm modal 2!
<!--close button-->
<span class="close">×</span>
<!--content B-->
</div>
</div>
<!-- -->