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.
Related
I'm using HTML templates, which are based on Bootstrap 4.3.1 to present my students with learning content. In the current templates, all accordion panels are closed on page load and each accordion panel can be opened regardless of how many others have also been opened.
A working example can be found on this CodePen: https://codepen.io/hagelslag1001/pen/MWGeZJr
The HTML code is as follows:
<h2>Accordion: Group of 2</h2>
<p class="small">Accordion: start copy</p>
<!-- Accordion headings should be changed to respect page hierarchy -->
<div class="accordion shadow mb-5">
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 1 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 1 of 2 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2 of 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 2 content here.</p>
</div>
</div>
</div>
</div>
<p class="small">Accordion: end copy</p>
Is it possible to change this default behaviour so that only one panel can be opened at a time? (i.e. as soon as a new panel is opened, the previously opened panel will automatically close)
The Bootstrap examples use (data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne") to accomplish this for the accordions in these templates
I can't figure out how to accomplish this, since the HTML code for the accordions in these templates look different than the Bootstrap 4 examples, which use either an a or button tag to trigger the collapsible event.
Here is a simpler answer based on your CodePen: https://codepen.io/mrtcntn/pen/MWGeZdP
According the Bootstrap 4 docs, you need id="accordion" on the top level div and you don't need to give ids like id="accordion_1" and id="accordion_2".
Therefore I removed the first portion from the JS and added id="accordion" at line 18 in the HTML.
You can do this by letting javascript check for active classes and only allowing one at the time. Here's a simplified example.
// DOM here
let nav = document.querySelector(".nav");
// Handlers here
const clickHandler = function (e) {
if (e.target.classList.contains("nav__link")) {
const link = e.target;
const siblings = link.closest(".nav").querySelectorAll(".nav__link");
link.classList.toggle("active");
// removes all actives except for the clicked one
siblings.forEach((el) => {
if (el !== link) el.classList.remove("active");
});
}
};
// Listeners here
nav.addEventListener("click", clickHandler);
body {
font-family: sans-serif;
}
.nav__link {
display: block;
width: 100%;
}
.active {
background: #0f0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="nav">
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="#accordeon--1">Accordeon 1</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--2">Accordeon 2</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--3">Accordeon 3</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#accordeon--4"
>Accordeon 4</a
>
</li>
</ul>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
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 want to make hidden divs show when a title is clicked. I have chosen jQuery to do this with the slideToggle. I set the to have a class of "clicker-2", and the div is class "skill-talk_holder" that has the content is set to be hidden by CSS. There are multiple divs with the class of "skill-talk_holder" so I have to use something that will only open one at a time, and not all of them when "clicker-2" is clicked.
However, the only thing that happens is the page reloads (by just going to the top, not with a new HTTP req).
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
$('.clicker-2').click(function() {
$(this).siblings('div').slideToggle("slow");
});
});
</script>
And the HTML
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
Given your comments, you could use .nextAll()
$(document).ready(function() {
$('.clicker-2').click(function(event) {
event.preventDefault();
$('.skill-talk_holder').slideUp('slow');
$(this).parent().nextAll('.skill-talk_holder:eq(0)').slideToggle('slow');
});
});
.skill-talk_holder {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
<div class="divider">
<h3 class="title">Non-Coding Web Skills</h3>
</div>
<span class="spacer"></span>
<div class="skill-talk_holder">
content content content
</div>
it's just lacking of parent selector:
$(this).parents('.divider:first').siblings('div').slideToggle("slow");
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.
Here is my accordion how can i apply some stylesheet to this, so that looks like a tree.
eg: + when accordion tab is closed and - when accordion is open
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">System</a></div>
<div class="AccordionPanelContent">
<a onClick="showPatchesSpan();">Patches</a><br/>
<a onClick="showNetworkSpan();">Network</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" > <a onClick="showNone();">User Environment</a></div>
<div class="AccordionPanelContent">
<a onClick="showEnvironmentVariableSpan();">Environment Variables</a><br/>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <a onClick="showSystemSpan();">{mainData::#product}</a></div>
<div class="AccordionPanelContent">
<a onClick="showOdbcSpan();">ODBC</a><br/>
<a onClick="showBitmodeSpan();">Bitmode</a><br/>
</div>
</div>
<script type="text/javascript">
var sysAcc = new Spry.Widget.Accordion("systemAccordion", {defaultPanel: -1, useFixedPanelHeights: false });
</script>
</div>
If you look in the SpryAccordion.css stylesheet you will find
.AccordionPanelTab {}
.AccordionPanelOpen .AccordionPanelTab {}
You can set whatever background image you like on those two to get the effect you are after .AccordionPanelTab will affect the normal state and .AccordionPanelOpen .AccordionPanelTab will affect the open state. There are also comments in the stylesheet telling you what the different classes do.
use css background image propeties and apply it to proper css class when its open and closed.