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>

Shifting page focus when opening a collapse

I have a website with 3 images, on click the image opens a collapse below with an iframe website inside. I want the site to scroll down to the opened iframe when the image is clicked. I can only find an answer for accordions.
The frames open a 3d tour, which should stop when another is opened. I've made a basic codepen, it uses dummy images and only links to one tour atm.
https://codepen.io/jvern22/pen/BGzgjw
My code. Image with link to Iframe, there are three of these;
<div class="col-md-4 port-item">
<a href="" class="" data-toggle="collapse" data-target="#tour-duqesa">
<img src="assets/img/duqesa.jpg" alt="">
</a>
<h2 class="section-title-nomargin features-box">Duquesa</h2>
<h5 class="options-text">Open in new window</h5>
</div>
The code for the iframe, again, there are three of these;
<div id="tour-duqesa" class="collapse">
<iframe height="600px" width="100%" src="assets/tours/duquesashorttour/index.html" name="iframe"></iframe>
</div>
I'm new to this so I hope that I have asked in the correct way.

Maybe some code on Jquery can help to approach what you need.
First, we can register a listener on the click event for the images that open a collapsible element, and then when some of they are clicked, close the current one that is visible to the user. This will help to only have one collapsible element open at a time. A code for this would be the next:
// Register a click listener on the images that opens a collapsible element.
$("a[data-toggle='collapse']").click(function()
{
// Close all visibile collapse elements.
$(".collapse:visible").collapse('hide');
});
Second, when a collapsible element is fully visible to the user, it triggers the next event: shown.bs.collapse. So we can put a listener on that event, and scroll down to the current visible collapsible with the next code:
$(".collapse").on("shown.bs.collapse", function()
{
var current = $(this);
// Scroll down to the current opened collapse element.
$([document.documentElement, document.body]).animate(
{scrollTop: current.offset().top},
1000
);
});
Here you have a working example you can play with it (check on fullscreen mode):
$(document).ready(function()
{
// Register a click listener on the images that opens a collapsible element.
$("a[data-toggle='collapse']").click(function()
{
// Close all visibile collapse elements.
$(".collapse:visible").collapse('hide');
});
// Register a listener for when a collapse element is made
// visible to the user (wait for animations transitions).
$(".collapse").on("shown.bs.collapse", function()
{
var current = $(this);
// Scroll down to the current opened collapse element.
$([document.documentElement, document.body]).animate(
{scrollTop: current.offset().top},
1000
);
});
});
box-sizing: border-box;
.display-iframe {
border: none;
}
.options-text {
font-size: 14px;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
color: #000;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<section id="tour-gallery">
<div class="container">
<div class="row">
<div class="col-sm-12 section-description wow fadeIn">
<h2 class="section-title">Have a look at what can be done</h2>
</div>
<div class="col-md-4 port-item">
<a href="#tour-duqesa" class="" data-toggle="collapse" data-target="#tour-duqesa">
<img src="https://dummyimage.com/350x186/000/fff" alt="">
</a>
<h2 class="section-title-nomargin features-box">Duquesa</h2>
</div>
<div class="col-md-4 port-item">
<a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills1">
<img src="https://dummyimage.com/350x186/000/fff" alt="">
</a>
<h2 class="section-title-nomargin features-box">Aldea Hills</h2>
</div>
<div class="col-md-4 port-item">
<a href="" class="" data-toggle="collapse" data-target="#tour-aldeahills2">
<img src="https://dummyimage.com/350x186/000/fff" alt="">
</a>
<h2 class="section-title-nomargin features-box">Aldea Hills 2</h2>
</div>
</div>
<div id="tour-duqesa" class="collapse">
<iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>
</div>
<div id="tour-aldeahills1" class="collapse">
<iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>
</div>
<div id="tour-aldeahills2" class="collapse">
<iframe height="600px" width="100%" src="https://your360tours.com/test/assets/tours/duquesashorttour/index.html" name="iframe"></iframe>
</div>
</div>
</section>
Also, I push the code on codepen too, but had to replace the slim version of JQuery for the full version, otherwise the animate() won't be defined, here you have the link:
Codepen Example

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 toggle/html: changing the content in div

I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.

I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>

Clickable div except for links and buttons

On my web app, I have a div that hides when clicked. Then a new div (video) appears. My problem is that I have an upvote button and a link in the first div, but if you click those, the div hides and pops up the video instead of the wanted functionality.
How can I have it so if they click the button or the link, it doesn't hide the first div and show the video?
<script type="text/javascript">
$(function () {
$('.videoDiv').hide();
$('.firstDiv').on('click', function () {
$('.videoDiv').show();
$('.firstDiv').hide();
});
});
</script>
First Div:
<div class="panel-body firstDiv">
<div class="col-xs-7 col-sm-8 col-md-7">
<a class="btn btn-xs btn-info" rel="nofollow" data-method="put" href="/startups/1/follow">Follow</a>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="btn-group-vertical pull-right" role="group">
<a class="btn btn-sm btn-default pull-right upvote-btn" data-type="json" data-remote="true" rel="nofollow" data-method="put" href="/startups/1/upvote">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
</div>
</div>
</div>
Video Div:
<div class="panel-body videoDiv">
<div class="video-js-box">
<video id="" class=" video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="" data-setup="{}">
</video>
</div>
</div>

Exclude events for link /upvote button that is, apply click function on div and check it is not on .btn only then execute your statements. Also, you need to check if target is not child of .btn
<script type="text/javascript">
$(function () {
$('.videoDiv').hide();
$('.firstDiv').on('click', function (e) {
if (!$(".btn").is(e.target) //not clicked on .btn
&& $(".btn").has(e.target).length === 0) //clicked thing is not child of .btn
{
$('.videoDiv').show();
$('.firstDiv').hide();
}
});
});
</script>

Try utilizing .is() , calling .show() , .hide() if e.target does not have btn class
$(function () {
$(".videoDiv").hide();
$(".firstDiv").on('click', function (e) {
if (!$(e.target).is(".btn")) {
$(".videoDiv").show();
$(".firstDiv").hide();
};
});
});