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>
Related
The popover does not display the image correctly when opened for the first time.
Any idea how I can make sure that it always displays correct?
https://jsfiddle.net/n2Lfro30/1/
This is the button:
<button type="button" class="btn btn-primary" data-rel="popover" title="<strong>Heading</strong>" data-placement="right" data-content="<img src='https://picsum.photos/400'>"> Click me </button>
this is the JS:
$(document).ready(function() {
$('[data-rel=popover]').popover({
html: true,
trigger: "hover"
});
})
You can use popover template property to make image responsive inside the popover also use img-fluid class to img tag.
$(document).ready(function () {
$('[data-rel=popover]').popover({
html: true,
trigger: "hover",
template: `<div class="popover p-2" role="popover">
<div class="popover-arrow"></div>
<div class="popover-inner"><h4>Heading</h4></div>
<img src="https://picsum.photos/400" alt="Image" class="img-fluid">
</div>`
});
})
img{
width:100%;
}
<script src="https://homylive.com/erp/assets/js/jquery.min.js"></script>
<script src="https://homylive.com/erp/assets/bootstrap/js/bootstrap.min.js"></script>
<link href="https://homylive.com/erp/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-rel="popover" title="<strong>Heading</strong>" data-placement="right"> Click me </button>
It sounds like you want the image to be responsive inside the container. For starters, add the styles width:100%; height:auto to your image to see what that does. (And then I'd recommend refactoring by using css in place of the inline style.)
<img src='https://picsum.photos/400' style='width:100%; height:auto'>
Using bootstrap's styles, it would be-
<img src='https://picsum.photos/400' class='img-responsive'>
https://jsfiddle.net/ho2btzga/
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>
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.
I think I am doing this a slightly silly way, and so am happy to take suggestions for a new approach.
I am creating a accordion style dropdown nav for mobile but I want the target divs to be outside of the panel group. My code is of the form:
<div class='panel-group' id='accordian'>
<div class='mystyles'>
<ul>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-one-id'>Item 1</a>
</div>
</li>
.... more list items here...
</ul
</div>
<!-- the collapsed divs start here -->
<div id='target-one-id' class='clearfix collapse panel-collapse'>
...content
</div>
... more target divs here
</div> <!-- end panel group -->
I have chosen to do this as I need to style the links differently to the collapsed divs and I want them to appear lower down the page. It does generally work, however, to make a target div collapse you have to click on it's parent link. I want the child to collapse whenever any of the list links are clicked. Or in other words I want only one target div visible at any one time.
I may just not understand bootstrap but how would I go about doing this?
EDIT: A bad solution
So I have a slightly rough solution where I add js code of the form:
$("#target-one").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-three").collapse('hide');
});
This works but the transition animation is jerky and the targets being closed appear to reopen and close as they are hidden. What is a better solution?
$("#target-one").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-three").collapse('hide');
});
$("#target-two").on("show.bs.collapse", function(){
$("#target-one").collapse('hide');
$("#target-three").collapse('hide');
});
$("#target-three").on("show.bs.collapse", function(){
$("#target-two").collapse('hide');
$("#target-one").collapse('hide');
});
.mystyles ul {
list-style-type:none;
margin: 0;
padding: 0;
}
.mystyles ul li {
display:inline-block;
}
.mycontent {
background-color:orange;
}
.one {
height:300px;
background-color:pink;
}
.two {
width:200px;
height:500px;
}
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class='panel-group' id='accordian'>
<div class='mystyles'>
<ul>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-one'>Item 1</a>
</div>
</li>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-two'>Item 2</a>
</div>
</li>
<li>
<div class='nav-item'>
<a data-toggle='collapse' data-parent='#accordian' href='#target-three'>Item 3</a>
</div>
</li>
</ul </div>
<!-- the collapsed divs start here -->
<div id='target-one' class='clearfix collapse panel-collapse'>
<div class='mycontent one'>
content...
</div>
</div>
<div id='target-two' class='clearfix collapse panel-collapse'>
<div class='mycontent two'>
content...
</div>
</div>
<div id='target-three' class='clearfix collapse panel-collapse'>
<div class='mycontent three'>
content...
</div>
</div>
</div>
<!-- end panel group -->
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Ok so the snippet seems to work properly... I am now a little confused. My actual code is almost identical except for some dynamic content which is inserted into the target divs.
Could resizing of the hidden diff cause problems? I do not know how to simulate that in the snippet.
I am using navigation drawer of Framework7 plugin on my hybrid app. The drawer can be open/close using the button as well as using swipe/slide left/right.
Now when the navigation drawer was open, the class <div class="panel panel-left panel-reveal"> added another class which is active class.
So when opened: <div class="panel panel-left panel-reveal active ">
when closed: <div class="panel panel-left panel-reveal>
Based on that event, is it possible to add style to other class?
Example is this class: <div class="views"> to <div class="views" style="opacity: 0.5">
What to accomplish: When the drawer is open, the class view will add style, when drawer is close remove the view class style.
Is it possible to catch that event and accomplish what I would like to do?
Sorry for the delay, so below is the sample code to add a css class to a div only on hover event. I have done this using html and css only. (No DOM manipulation).
<!doctype html>
<html>
<head>
<style>
a.ex1:hover{color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
.open-close{ display: none;}
a.ex6:hover .open-close{display: block;}
</style>
</head>
<body>
<p>
<a class = "ex1" href="#"> This link changes color </a>
</p>
<p>
<a class = "ex2" href="#"> This link changes font-size </a>
</p>
<p>
<a class = "ex3" href="#"> This link changes background-color </a>
</p>
<p>
<a class = "ex4" href="#"> This link changes font-family </a>
</p>
<p>
<a class = "ex5" href="#"> This link changes text-decoration </a>
</p>
<p>
<a class = "ex6" href="#">
<div>This link displays another div by detecting change in class</div>
<div class="open-close">
Here you can add your content to hide/show/modify elements based on the classes
</div>
</a>
</p>
</body>
</html>
NOTE - Just remember to use the appropriate CSS selector based on your HTML structure.
Hope this helps. Let me know if you have any questions. Happy to help.
Hi Yes it is Possible. Using HTML and Javascript itself. You can also achieve this using JQUERY DOM manipulation. Let me know which one would you want to know.
I have modified your HTML a little
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div> <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
<div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when class panel has active class then remove the bgcolor when active class remove (vise versa) -->
<div class="view view-main" data-page="home">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
</div>
<div class="center" style="left: -6.5px;"></div>
<div class="right">
<button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block"> content here... </div>
</div>
</div>
</div>
</div>
</div>
Just add this JavaScript function and you will be good to go.
function myFunction(){
$(".panel-reveal").addClass("active");
if($(".panel-reveal").hasClass("active")) {
$(".views").addClass("change")
}
}
CSS will be
.active{
background-color: green !important;
}
.change{
background-color: red !important;
}
I hope this helped.