How to access the sibbling node of parent in javascript? - javascript

I have various questions on my faq page like this
<h3>How to signup?</h3>
<div class="info" style="display:none">
This is the hidden answer
</div>
The answer is hidden and when the user clicks on the link the div below it appears.Though I can do this using jquery easily but I don't want to make the page heavy so I simply using the following function
function toggle_display()
{
var answers=document.getElementsByClassName("info");
for(var i=0;i<answers.length;i++)
{
//hide all the divs first
answers[i].style.display='none';
}
//return block as style so that the caller's div answer can be set to block
return 'block';
}
But I am having problem accessing the next sibbling div of the link.What should I substitute in the following line
<a href="#" onclick="**this.parent.nextSibbling**.style=toggle_display()">

If you want to get the next sibling of parent node then your code should be like this.
this.parentNode.nextSibling

For ignoring text dom nodes and get the right one element use:
this.parentElement.nextElementSibling.style = ......

Related

Hiding multiple elements & adding styles using Javascript

I can only use JavaScript to edit my checkout page, I am trying to hide and add styles to multiple elements using the least amount of characters.
Here's an example of one of the elements.
<div class="section section--remember-me shown-if-js">
<div class="content-box__row content-box__row--tight-spacing-vertical content-box__row--secondary">
Also trying to change the width of a button and make sure that the class.
<div class="step__footer" data-step-footer="">
This the parent of where the button is located in, and I want to make sure that the text thats also in this div isn't next to the button, but under it so I think I have to add style="display: inline-block;"
The button class is called
<button name="button" type="submit" class="step__footer__continue-btn btn ">
This is the code I have so far. I haven't been able to get it to hide multiple elements yet.
if (document.querySelector('.section--example') !== null) {
if (!element.classList.contains('example1')) {
element.classList.add('hidden');
};
document.getElementById("step__footer__continue-btn").style.width = "100%";
};
if-blocks do not need semicolons btw
document.querySelectorAll(".section--example:not(.example1)").forEach(hide);
function hide(element) {
element.classList.add("hidden");
}
To effect all element in an HTML class in jQuery it's like:
$(function(){
$('.sectionExample').css('background', '#000;');
});
or
$(function(){
$('.sectionExample').each(function(increment, element){
var current = $(element);
current.css('background', '#000;');
// this way is more versatile, if working with other Elements
});
});

jQuery code is hiding all content inside my div

I have the following code:
jQuery(document).ready(function($) {
$("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() {
$("#available-widgets-list div:not([id*='layers-widget'])").css('display','none');
});
});
The idea is, when i click a button that contains the class "layers-builder", all divs in "available-widgets-list" that DO NOT contain the class "layers-widget" are hidden.
The problem I'm facing is that using this code also hides all the divs inside "layers-widget" (as not all of them have "layers-widget" in the id.
for example, here is a mockup markup:
<div id="some-id">
...
</div>
<div id="this-layers-widget-89">
<div id="hello"></div>
<div id="yes"></div>
</div>
In the above example, the first div "some-id" would be hidden, along with all the child divs inside "this-layers-widget-89"
How can I make it so that all the content within the div containing "layers-widget" still shows?
The ">" operator specifies that the div must be a direct child of #available-widgets-list:
$("#available-widgets-list > div:not([id*='layers-widget'])").css('display','none');
You should add a class instead of relying on finding parts of some-id but this will work also work: $('[id*="some-id"]');
You should also be using jquery's built in hide()method instead of css('display', 'none'). They do literally the exact same thing but using the built in methods is more readable.

Insert div into other div with javascript

I have two pages in my site.
Page one code is dynamic. and there is a section which generates dynamically.
These are the classes which generates for that section :
div.when, div.where, div.planner, div.capacity, div.websites
I want to use that same section in my page two inside below div.
<div class="add-to-calendar"> </div>
I am not getting any clue how can I do it with jquery or javascript.
I need help in this.
You can use append method to include any element inside div.
Html:
<div class="innerdiv"> Inner Div</div>
<div class="add-to-calendar">Outer Div </div>
Jquery :
.append method will insert inner div to your outer div.
$(".add-to-calendar").append($(".innerdiv"));
If your page refreshed, No problem you can maintain element in localstorage.
use below code to maintain the element and use it.
var testObject = $(".innerdiv").html(); // get the element
localStorage.setItem('element', testObject ); // Put the object into localstorage
var getTestObject = localStorage.getItem('element'); // use the element
$(".add-to-calendar").append($(getTestObject)); // Insert element

Javascript access nested HTML element from given Javascript object argument

I am trying to write a small script that will automatically reveals/hides the content of a div when the mouse gets over/out of it. What I wanna do is to have the title visible and when someone mouseover the title some more text to get visible.
The problem is that I want to show/hide only a specific inner div of any given element and not to hide the entire element. I do have lots of elements so to handwrite javascripts for every single of them is a bit silly
My HTML code goes like:
<li id="job1" onmouseover ="div2mouseover(this)" onmouseout="div2mouseout(this)">
<div style = "display:none" id="jobDescription">
<p> Blablabla</p>
</div>
<li>
My JavaScript code goes like:
<script type="text/javascript">
function div2mouseover(obj)
{
//obj.style.display = "none"; //I can reach that
obj.getElementById("jobDescription").style.display = "initial"; //I can't reach that
}
</script>
So with the obj.style.display I can edit the visibility of any given element, but I can't reach its inner div that I am trying to reach.
I have managed to do that for a single element like this:
document.getElementById("jobDescription").style.display = "initial";
But with this way I have to write a script for all my job elements, which are a lot.
Any suggestions??
You can reference elements by their position too.
For example if the div you want to display is always the first div inside the "hover" li you can do
function div2mouseover(obj) {
var div = obj.getElementsByTagName("div")[0];
div.style.display = "initial";
}
You don't need any IDs in the divs if you do it like this.
The comment from the friend nnnnnn solved my case.. (maybe the other answers might work as well)
ID is supposed to be unique. Use a class instead, and use obj.querySelector(".classNameHere") – nnnnnn 12 mins ago
Thank you guys!

Passing HTML and CSS to Javascript

I need to find a way to pass the visible div to javascript. This may not even be the best way to accomplish what I'm trying to accomplish, so I'm open for other suggestions.
All my site content opens in a single overlay. When a button is clicked in the navigation, that content opens in the overlay. When another button is clicked, that content replaces the current content in the overlay. And so on.
The best identifier (that I've spotted) of which overlay is open, is (CSS) display:block...and all the hidden divs are display:none....
So I want to pass which div has the display:block to javascript (Note: all the div's have unique ID's)
I'm sure this is something easy, But I can't seem to find it...
Thanks in advance for your time!!
Each HTML element in JS has style property. You can read and change element style by calling for example
document.getElementById('id').style.display
So you don't need to pass anything to JS, it's already there.
By reading your question it sounds like you need to identify which of your divs is the visible one. The easiest way to do that is add a class to all your divs with content, you can then use document.getElementsByClassName() to get a list of them and loop through to find which one is visible one based on a display property of block.
<div class="content" style="display: none";>a</div>
<div class="content" style="display: block;">b</div>
<div class="content" style="display: none";>c</div>
<div class="content" style="display: none";>d</div>
<div class="content" style="display: none";>e</div>
var elements = document.getElementsByClassName("content");
for(i = 0; i < elements.length; i++)
{
if (elements[i].style.display == 'block')
{
// elements[i] = this is the visable div
alert('This elements[i] has a display of block; contents = ' + elements[i].innerText);
}
}
The above script will output/alert 'b' as it is the visible div found.
Fiddle link

Categories

Resources