We Keep Coding

Display html of previous element using jquery?

I am a beginner.
I want to display the HTML of previous element when the button is clicked.
I am able to display HTML content of button using outerHTML property. But when i use prev() function with the current object, it is showing error.
function show(currentObject) {
alert($(currentObject)[0].outerHTML);
}
above code gives the html content of the current button.
(Click) is shows as alert.
but
function show(currentObject) {
var prevObject = $(currentObject).prev();
alert($(prevObject)[0].outerHTML);
}
above code is giving me error!!
error: TypeError: $(...)[0] is undefined
Below is the html
<div class="row">
<div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
<div class="col-md-12"><p>click below button</p></div>
<div class="col-md-4"><button onclick="show(this)" class="btn btn-primary">Click</button></div>
</div>
Is there a way to do it right?

You can use .prev().html() to getting previous element html, check updated snippet below..
alert($('.currentItem').prev().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">Previous Element</div>
<div class="item1 currentItem">Current Element</div>

If you want to use pure Javascript use previousElementSibling
document.getElementById('foo').addEventListener('click', currentObject);
function currentObject() {
alert(this.parentNode.previousElementSibling.outerHTML);
}
body {
font: 13px Verdana;
}
<div class="row">
<div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
<div class="col-md-12">
<p>click below button</p>
</div>
<div class="col-md-4"><button class="btn btn-primary" id="foo">Click</button></div>
</div>

javascript toggle showing and hiding several div elements

I have two divs on a page (id's MAY and JUNE) and two buttons on the page. The page startes off by showing the May div, with the June div hidden using css display: none
I am trying to create the correct javascript that will toggle between the two of them, but (after searching on here) I can only manage to get one to work.
Codepen showing issue is https://codepen.io/billteale/pen/zwBBez
<a href="#" id="button" >MAY</a>
<a href="#" id="button" >JUNE</a>
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey"><h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
...and the current js is
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('MAY');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Eventually I will have four or more divs to toggle between, with each button showing its relevant div, and hiding the others.
Can anybody tell me how to add to the code I have here to make this work for multiple elements?

It can be done by setting the div id's in the anchor tag's href attribute, and showing the corresponding div while hiding the rest. It can be done for any number of div's with no extra script, Just add the new div id to the new anchor tags href. You should give a common class to all the div's like month to select them all.
$("a.btn").click(function() {
var id = $(this).attr("href");
$("div.month:visible").hide();
$(id).show();
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY" class="month">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="month hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

First you add a "div-toggle" class to each one of the divs you want to toggle. After that, you bind click events on your buttons, firing a function which takes an identifier as argument.
The function will run through your divs and set the one that has the argument id as visible, and hide the others.
This way you can add more divs to be toggled. You just have to mark them with the "div-toggle" class, set their id's and create their respective buttons.
var divs = document.getElementsByClassName('div-toggle');
function toggle(id) {
for (var i = 0; i < divs.length; i++) {
var div = divs[i];
if (div.id == id)
div.style.display = 'block';
else
div.style.display = 'none';
}
}
<a href="#" onclick="toggle('MAY')" >MAY</a>
<a href="#" onclick="toggle('JUNE')" >JUNE</a>
<!-- first div, shows on page load -->
<div class="div-toggle" style="display:block;" id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="div-toggle" style="display:none;" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

div.style.visibility = "hidden"
this will completely hide your div. I'm pretty sure this is what you are asking for
also instead of that you can make a separate function and add o'clock to div
<div onclick="nameoffunction()"></div>
the function can take in a parameter and each div on click function can have the parameter of its id

Your div were messed up! The snippet is working now with the help of jQuery.
$("#JUNE").hide();
$("#MAY").show();
$('#button-may').on("click", function() {
$("#JUNE").hide();
$("#MAY").show();
});
$('#button-june').on("click", function() {
$("#JUNE").show();
$("#MAY").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
MAY
JUNE
<!-- first div, shows on page load -->
<div id="MAY">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>May 2017</strong></h1>
</div>
</div>
<!-- second div, hidden originally -->
<div class="hidden" id="JUNE">
<div style="background-color: lightgrey">
<h1 style="padding: 5px"><strong>June 2017</strong></h1>
</div>
</div>

Ignore visibility of outer elements and select the first visible child element in a jQuery selector

HTML:
<div class="outer">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
JavaScript (fiddle):
var $first_visible = $("div.inner:visible:first");
This returns the first visible inner div, which is inner2.
However, as soon as the outer div is hidden (let's say I want to fade it in at some later time):
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
all inner divs are considered hidden and the selector does not return inner2 any more.
How would I need to modify my jQuery selector to ignore the container's visibility?

As adeneo said, once its hidden, there isnt much you can do.
However, you can check before hand, show it regardless, then hide it again if it was hidden
var wasVisible = $(".outer").is(':visible');
$(".outer").show();
var $first_visible = $("div.inner:visible:first");
if (!wasVisible) {
$(".outer").hide();
}
console.log($first_visible.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>

MDN says:
When you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
Hence, whatever the HTML elements are child to the parent element will not be rendered in the HTML page.
And moreover, whatever styles that has been applied on the parent element will not be rendered in HTML page.
In order to achieve what you want and if you consider that your HTML element should be in the document tree then try using CSS visibility property. For example:
<div class="outer" style="visibility: hidden">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner" style="visibility: visible"></div>
<div id="inner3" class="inner"></div>
</div>
JS Fiddle

If I understood you correctly, you can simulate the effects of the parent being hidden using CSS like this.
HTML
<div class="outer hide">
<div id="inner1" class="inner hide">Inner 1</div>
<div id="inner2" class="inner">Inner 2</div>
<div id="inner3" class="inner">Inner 3</div>
</div>
CSS
.hide {
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
// For an SVG
fill: rgba(0,0,0,0);
stroke-opacity: 0;
}
The reason why you can't use the visibility/display/opacity property is because as #Umesh mentioned that the all descendant elements will also get their display/visibility/opacity as not visible as if the element doesn't exist in the document tree.
But using this method you set the alpha to 0 of the element and this doesn't effect the descendants unless they have inherit set for those properties.
Hope this helps.

write two classes : first one to display and last one to hide.
With that you can select all divs whoses "visible" even if parent is "hidden"
var $first_visible = $("div.inner.enable");
console.log($first_visible);
$("div#result").text($first_visible[0].id);
.disable{
display : none;
}
.enable{
display : block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer disable">
<div id="inner1" class="inner disable">1</div>
<div id="inner2" class="inner enable">2</div>
<div id="inner3" class="inner enable">3</div>
</div>
<div id="result"></div>

One option would be to show the parent element, check for the first visible element, and then hide the parent element again.
Alternatively, since the element has inline CSS, you could filter the elements based on whether the display property is set to none and then retrieve the first one in the filtered collection:
Updated Example
var $first_visible = $(".inner").filter(function () {
return this.style.display !== 'none';
}).first();
var $first_visible = $(".inner").filter(function () {
return this.style.display !== 'none';
}).first();
$("div#result").text('First visible: #' + $first_visible[0].id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="display: none;">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
<div id="result"></div>
However, the better approach would be to check the computed style of the element using the .getComputedStyle() method. In doing so, you can determine whether the display of the element is set to none even if the element doesn't have inline CSS.
Updated Example
var $first_visible = $(".inner").filter(function () {
return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();
var $first_visible = $(".inner").filter(function () {
return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();
$("div#result").text('First visible: #' + $first_visible[0].id);
#inner1 { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="display: none;">
<div id="inner1" class="inner"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
<div id="result"></div>

My proposal is to use a filter function but only to select the first visible element (but this is also hidden because the parent is hidden):
var $first_visible = $('div.inner').filter(function() {
return !(this.style.visibility != '' || this.style.display != '');
}).first();
$(function () {
var $first_visible = $('div.inner').filter(function() {
return !(this.style.visibility != '' || this.style.display != '');
}).first();
$('body').append('<p>' + $first_visible.attr('id') + '</p>');
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none;"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>

See here i have checked style attribute for ignore first div. And check with hidden selector for get all other div.
$(document).ready(function(){
var currElements=$('.inner[style!="display: none"]:hidden'); // Here you are get two div with id inner2 and inner3
alert(currElements[0].id); // First div
alert(currElements[1].id); // First div
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none">Inner 1</div>
<div id="inner2" class="inner">Inner 2</div>
<div id="inner3" class="inner">Inner 3</div>
</div>

Take a flag value and loop each div.inner to get first visible element. Then check its css property.
Below is the tested code :
var isValid=true;
$("div.inner").each(function() {
if($(this).css("display") == "block" && isValid) {
$("div#result").text($(this).attr('id'));isValid=false;
}
});

Pass multiple ID's to JS function

My goal in this code is to show specific div tags when the link is clicked and hide all other div tags. I keep rewriting it in different ways but can't seem to get it working properly.
JavaScript below...
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.visibility="visible";
document.getElementById(id2).style.visibility="hidden";
document.getElementById(id3).style.visibility="hidden";
document.getElementById(id4).style.visibility="hidden";
}
HTML below...
Home
Information
Payment
Contact
<div id="home">Content</div>
<div id="info">Content</div>
<div id="payment">Content</div>
<div id="content">Content</div>

Your code is not working properly because you are passing contact in your function instead of content.
Consider using display:none instead of visibility because if you use visibility your content will be hidden but it will leave a space behind:
function show(id1, id2, id3, id4)
{
document.getElementById(id1).style.display="block";
document.getElementById(id2).style.display="none";
document.getElementById(id3).style.display="none";
document.getElementById(id4).style.display="none";
}
Home
Information
Payment
Contact
<div id="home">Home Content</div>
<div id="info">Info Content</div>
<div id="payment">Pay Content</div>
<div id="contact">Con Content</div>

If this is your html:
<div id="home" class="singleVisible" onclick="disableOthers(this)">Content #1</div>
<div id="info" class="singleVisible" onclick="disableOthers(this)">Content #2</div>
<div id="payment" class="singleVisible" onclick="disableOthers(this)">Content #3</div>
<div id="content" class="singleVisible" onclick="disableOthers(this)">Content #4</div>
Then this could be your script:
function disableOthers(e) {
var all = document.getElementsByClassName('singleVisible');
for(var i = 0; i < all.length; i++) {
// First make all of the elements with the same class hidden.
if (all[i] !== this) {
all[i].style.visibility = 'hidden';
}
// Then make the clicked element visible.
e.style.visibility = 'visible';
}
}
While I feel that it's important that people learn JavaScript this is the sort of thing that jQuery DOES really help with. The 'onclick' attributes above are not recommended for multiple reasons but if you're going to want to remove those and replace them with actual event handler calls in JavaScript then you ALSO are probably going to want to make sure you support older (IE8, not THAT old) browsers as well. Check this out:
http://www.anujgakhar.com/2013/05/22/cross-browser-event-handling-in-javascript/
In any case, the JQuery version is as simple as removing those onclick attributes and using this script instead:
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
<script>
$('.singleVisible').click(function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
Also, note that best practice (if you can) is to have a parent container and attach the event to that instead. Otherwise in both examples I've given you're attaching four event handlers in each case. It's as simple as wrapping the links in a parent div and doing something like this:
<div id="parent">
<div id="home" class="singleVisible">Content #1</div>
<div id="info" class="singleVisible">Content #2</div>
<div id="payment" class="singleVisible">Content #3</div>
<div id="content" class="singleVisible">Content #4</div>
</div>
<script>
$('#parent').on('click', '.singleVisible', function() {
$('.singleVisible').hide();
$(this).show();
});
</script>
Have fun! =)

Give all your div elements a class. On click:
hide all of them by using
getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
make the particular div visible by its id
Doing these kind of DOM manipulations is very easy with jQuery.

Accordion Box malfunction in firefox

i have the following function written in javascript which operate a slide up/down box. but in firefox, it malfunctions. it just opens/closes once. after that no play.
i am getting the height() param from the box and storing it in hidden input. but firefox is unable to read the correct height of the box.
look at the code to understand better :
JS :
function boxCollapse() {
$("#boxHeight").attr("value", parseInt($("#accTipsBox").height()));
$("#accTipsBox").animate({height:'0px'});
$(".btnCollapse").css({display:'none'});
$(".btnExpand").css({display:'block'});
$("#accTipsBox").css({padding:'0px'});
}
function boxExpand() {
$("#accTipsBox").animate({height: $("#boxHeight").attr("value")});
$(".btnExpand").css({display:'none'});
$(".btnCollapse").css({display:'block'});
$("#accTipsBox").css({padding:'0px'});
}
HTML :
<section class="accBox grey">
<header>
<div class="title">DISCLAIMERS</div>
<a style="display: none;" class="btnExpand" href="javascript:void(0);"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
<a style="display: block;" class="btnCollapse" href="javascript:void(0);"><img src="/resources/images/boxCollapseGrey.jpg" alt="button"></a>
</header>
<div id="accTipsBox" style="height: 125px; padding: 0px;">
<input type="hidden" id="boxHeight" value="125">
<div class="accBoxContent">
<div><p></p><p></p><p></p></div>
</div>
</div>
</section>

I think this is what you were going for:
//bind a `click` event handler to all the elements with the `btnExpandCollapse` class
$('.btnExpandCollapse').on('click', function (event) {
//stop the default behavior of clicking the link (stop the browser from scrolling to the top of the page)
event.preventDefault();
//first select the parent of this element (`header` tag) and then get its sibling element that has the `accTipsBox` class, then take that element and slide it up or down depending on its current state
$(this).parent().siblings('.accTipsBox').slideToggle(500);
});
With some slight tweaks to your HTML:
<section class="accBox grey">
<header>
<div class="title">DISCLAIMERS</div>
<!-- Notice there is only one link now that does the job of both -->
<a class="btnExpandCollapse" href="#"><img src="/resources/images/boxExpandGrey.jpg" alt="button"></a>
</header>
<!-- Notice I changed the ID attribute to CLASS so this code will work for repeated structure -->
<div class="accTipsBox" style="height: 125px; padding: 0px;">
<div class="accBoxContent">
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</div>
</div>
</section>
Here is a demo: http://jsfiddle.net/VGN64/
Here is some documentation:
.slideToggle(): http://api.jquery.com/slidetoggle
.siblings(): http://api.jquery.com/siblings
On a side-note, if you want to store data about a DOM element, use jQuery's $.data() method:
var $box = $("#accTipsBox");
$.data($box[0], 'height', $box.height());
You can then access this data like this
var height = $.data($('#accTipsBox')[0], 'height');
Notice that I appended [0] onto the end of the jQuery object to return just the DOM node associated with the object, this is required by the $.data() method: http://api.jquery.com/jquery.data. This is a very fast method of storing data associated with DOM elements.