I am basically trying to write a script that could expand a collapsed <div> using JavaScript. While using the frontend part, I can collapse and expand that <div> just by clicking on that but when it comes to JavaScript, it's not working if I try element.click() or even element.ariaExpanded = "true".
I am attaching the code for before and after click on that <div> highlighting the differences in the code.
I tried several things including
var outerDiv = document.getElementsByClassName("section--section--BukKG");
outerDiv[0].ariaExpanded = "true";
outerDiv[0].children[0].ariaExpanded = "true";
outerDiv[0].click();
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.remove('udi-angle-down');
document.querySelectorAll('.section--section-chevron--tJ4mD')[0].classList.add('udi-angle-up');
As you did not include any HTML markup the following is a rough facsimile of the original. You are essentially trying to toggle the visibility of the DIV elements and indicate, using ARIA tags, that the element is or is not expanded
To that end you can make use of the aria-expanded attribute in CSS to govern the visibility of the child objects within the parent container. By setting the attribute aria-expanded as either true or false will then invoke the relevant css rule to display/hide the children.
const bool=(v)=>v=='true' ? true : false;
const clickhandler=function(e){
this.setAttribute('aria-expanded', !bool(this.ariaExpanded) )
}
document.querySelectorAll('div.section--section--bukkg').forEach(div=>div.addEventListener('click',clickhandler) );
.section--section--bukkg{
transition:ease-in-out 250ms all;
border:1px solid red;
padding:1rem;
margin:1rem;
}
[aria-expanded="false"] .section--section--heading{
display:none;
}
[aria-expanded="true"] .section--section--heading{
display:block;
}
<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
<div class='section--section--heading' role='button' tabindex=0 data-purpose='section-heading'>
<div class='section-title' data-purpose='section-panel'>A title of some sort 1</div>
<span class='section-chevron'>Some content in a SPAN 1</span>
<div class='font-text-xs'>teeney weeney text 1</div>
</div>
</div>
<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
<div class='section--section--heading' role='button' tabindex=1 data-purpose='section-heading'>
<div class='section-title' data-purpose='section-panel'>A title of some sort 2</div>
<span class='section-chevron'>Some content in a SPAN 2</span>
<div class='font-text-xs'>teeney weeney text 2</div>
</div>
</div>
<div class='section--section--bukkg' data-purpose='section-panel' aria-expanded='false'>
<div class='section--section--heading' role='button' tabindex=2 data-purpose='section-heading'>
<div class='section-title' data-purpose='section-panel'>A title of some sort 3</div>
<span class='section-chevron'>Some content in a SPAN 3</span>
<div class='font-text-xs'>teeney weeney text 3</div>
</div>
</div>
Related
I have a scrolling timeline with images:
<div class="roadmap">
<h1 class="title">Roadmap</h1>
<div class="timeline">
<div class="swiper-roadmap">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=15');" data-month="February">
<div class="swiper-slide-content"><span class="timeline-year">By House ULTIMA</span>
<h4 class="timeline-title">Live, Love and Prosper</h4>
</div>
</div>
<div class="swiper-slide" style="background-image: url('https://unsplash.it/1920/500?image=16');" data-month="March">
<div class="swiper-slide-content"><span class="timeline-year">By House TITAN</span>
<h4 class="timeline-title">International Women's Day</h4>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
All divs should be hidden except the active one. But the problem is that all divs are visible on the page. Here is an example
Instead of showing two images it should actually show one and then another one when i select month. How can I achieve it?
Please try with this:
.timeline {
overflow: hidden;
}
check this Fiddle
You have to made some CSS changes. I have added two CSS Class at the end of your CSS :
.swiper-slide{
display:none;
}
.swiper-slide-active{
display:block;
}
Here is an updated code : https://codepen.io/anon/pen/BeyvKz
Did you try adding overflow: hidden; to .roadmap;
The simplest solution is to give the two div of class "swiper-slide" distinct ids, then write javascript to toggle between the two.
var isFebruary = (month == "February");
document.getElementById("slide1").style.display = isFebruary ? 'block' : 'none';
document.getElementById("slide2").style.display = isFebruary ? 'none' : 'block';
(You may also use attribute "hidden" of HTML5 using setAttribute() and removeAttribute())
Because you have the additional attribute data-month in the div's, you can get a bit fancier by using querySelectorAll() on the class "swiper-slide" to get the list of all div's of the class, traverse the list and hide all div's except the one matching the month. The code will then work even if you add more months to the page.
I need to search for divs with class 'test' that has only button type inside hid childs or child nodes. This is the HTML that I have to filter.
<div class="test">
<div>
<button> <span>Button 1</span></button>
</div>
</div>
<div class="test">
<div>
<button> <span>Button 2</span></button>
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</div>
Based on this jQuery selector I've been testing on this fiddle but it returns me this error:
The div that I've been expecting to return is the first div.
So how can I reach it?
You can compare the length of child div elements and child div elements that have button elements in it:
var notButtonDivs = $('.test').filter(function(){
return $(this).find('div').length == $(this).find('div:has(button)').length
})
Working Demo
This one should do the trick.
var TestDivs = $(document).find(".test div button");
alert(TestDivs[0].innerHTML);
I am trying to get the textContent of a h3 tag that appears above my parent div tag. The code is repeated, and adding an id is not an option for h3 tag. Looking to do this in pure Javascript. My html currently is...
<h3>Some header</h3> //textContent I am trying to get.
<div class="panel panel-success"> //parent
<div id="someid" class="panel-heading"></div> //child
<span class="pull-right glyphicon glyphicon-list-alt" style="padding-right: 1%"
onclick="myFunc(this.parentNode.id, what.goes.here?)"></span> //this needs to return parent id and the value of h3 tag
</div>
<h3>Some other header</h3> //textContent I am trying to get.
<div class="panel panel-success"> //parent
<div id="someid" class="panel-heading"></div> //child
<span class="pull-right glyphicon glyphicon-list-alt" style="padding-right: 1%"
onclick="myFunc(this.parentNode.id, what.goes.here?)"></span> //this needs to return parent id and some other tag when this span button is clicked
</div>
<h3>yet another header</h3> //textContent I am trying to get.
<div class="panel panel-success"> //parent
<div id="someid" class="panel-heading"></div> //child
<span class="pull-right glyphicon glyphicon-list-alt" style="padding-right: 1%"
onclick="myFunc(this.parentNode.id, what.goes.here?)"></span> //this needs to return parent id and yet another header when clicked.
</div>
This piece of code repeats many times, and the textContent of h3 and the div id changes every time. I am trying to return the value of the textContent of the h3 tag that appears about the span button i am clicking relative to the div tag that appears during the click. The h3 tag is not part of any other parent/child relationships, and is stand along...
From the click handler of the span you can access the above h3 element like this:
this.parentNode.previousSibling.textContent
See: https://developer.mozilla.org/en/docs/Web/API/Node/previousSibling
document.getElementByID("someid").parentElement.previousElementSibling.textContent;
Edited
let content = document.querySelectorAll('h3');
let count = content.length;
if (count) {
for (let i = 0; i < count; i++) {
alert(content[i].textContent);
}
}
https://jsfiddle.net/2kk49yLp/1/
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.
I have an html like this.I am trying to do a jquery trigger on a button click.Basically I just need to close the div when The button is clicked.
I have tried following code in button click using jquery but the div is not closing.Can anyone correct me
JS
$('.tags .alert-success .close').trigger(click);
HTML
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" <div class="tags alert-success">×<span class="noun">#</span><span class="noun">sed/span> <span class="noun">#</span><span class="noun">menshealth</span> </div></div>
<div class="clear-sentiment"></div>
</div>
</div>
This is what you need -- no space between the first two selectors -- .tags.alert-success. Both .tags and .alert-success are on the same element:
$('.tags.alert-success .close').trigger( 'click' );
//or $('.tags.alert-success .close').click();
And close the opening tag of .text div so that you have:
<div class="text"><div class="tags .......