We Keep Coding

Programatically click on a div root to open the content that internally gets open using java scripts

I am trying to click on the div class (_2wP_Y) below programatically in order to open a part of the screen which display certain content using javascript internally.
<div class="_2wP_Y" style="z-index: 3; height: 72px; transform: translateY(72px);">
<div tabindex="-1">
<div class="_2EXPL CxUIE _1f1zm">
....
....
</div>
</div>
</div>
I tried various ways to click on HTMLDivElement object. Console log printing on website as clicked but on screen it doesn't get clicked automatically.
Codes I tried
var HTMLDivElement = document.getElementsByClassName('_2wP_Y')
HTMLDivElement.onclick = function() {
console.log("Clicked " );
}
var clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
HTMLDivElement.dispatchEvent(clickEvent);
It prints Clicked on console.
I also tried HTMLDivElement.click();
It also print Clicked on console, but click doesn't happen on browser.
There is multiple div having same class name(_2wP_Y) and I am using Chrome for testing in Ubuntu.
Basically I am trying to click on div on left side part of the image below to open the groups messages content in the middle of the section.

i hope this will work, happy coding :)
var HTMLDivElement = document.getElementsByClassName('_2wP_Y')
HTMLDivElement[0].addEventListener("onclick", function(){
console.log("clicked")
HTMLDivElement[0].style.backgroundColor = "red";
})
HTMLDivElement[0].dispatchEvent(new Event("onclick"));
<div class="_2wP_Y" style="z-index: 3; height: 72px; transform: translateY(72px);">
<div tabindex="-1">
<div class="_2EXPL CxUIE _1f1zm">
....
....
</div>
</div>

The problem could be that the dom is not yet loaded, resulting in the onclick event not really being attached to the DOM element. Another issue could be that getElementsByClassName returns an array and not a single element (like getElementById would). So if you only have one object with that particular class, you can just use HTMLDivElement[0]
Try to wrap everything within window.onload = function() {};:
window.onload = function() {
var HTMLDivElement = document.getElementsByClassName('_2wP_Y');
HTMLDivElement[0].onclick = function() {
console.log("Clicked");
}
}

Use jQuery.
//handling click event
$("._2wP_Y").click(function() {
alert("I was clicked");
})
//click itself
$("._2wP_Y").click();
<div class="_2wP_Y">i was clicked</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to fire a unique ID modal when multiple divs with class is clicked using jQuery?

Forgive the strangely worded question, my first StackOverflow post, and I'm a novice to jQuery/JS. I've used the search feature a lot and haven't found exactly what I'm looking for:
I am having an issue essentially, where I have dynamically added divs by the end-user (they pick how many content blocks they want to use), with the same class, that need to hide and show specific divs (with unique IDs) when they are clicked. I finally figured out how to give each div a unique ID, but I'm not sure how to get the child divs of the particular div what was clicked, to fire properly on click. Hope that makes sense.
Here is the HTML I have:
<div class="resource-video">
//Unique thumbnail
</div>
<div class="overlay-container hide" style="width: 50px; height: 50px;">
<div class="video-player hide">
//Included unique video
</div>
</div>
This will end up being duplicated based on how many videos are added.
Here is the JavaScript I am using:
//Generates unique IDs for each of the divs on the page with those classes
var i = 0;
$(".resource-video").each(function(i){
$(this).attr("id","video_"+ (i+ 1) );
});
$(".overlay-container").each(function(i){
$(this).attr("id","container_"+ (i+ 1) );
});
$(".video-player").each(function(i){
$(this).attr("id","player_"+ (i+ 1) );
});
//Currently opens all of them
$(".resource-video").on("click", function(){
openModal(".overlay-container", false, true);
alert($(this).attr("id")); //Alerts the right div clicked
if ($(".video-player").hasClass("hide")){
$(".video-player").removeClass("hide").addClass("show");
$(".overlay-container").animate({ height:'300px', width: '500px' }, "slow");
}
$("#overlay").on("click", function(){
$(".video-player").removeClass("show").addClass("hide");
$(".overlay-container").css({ "height":"50px", "width":"50px",
"display":"none"});
$(this).hide();
});
return false;
});
// Probably not totally necessary, but just in case
function closeModals(){
$("body").find(".modal").hide();
$("#overlay").hide();
$("body, html").removeClass("no-scroll");
};
function openModal(divID, allowScroll, blockScreen){
closeModals();
$(divID).show();
if ( blockScreen == true ){ $("#overlay").show(); };
if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};
As it stands now, all of the overlays open because I am targeting the class not the IDs. Basically, I need to find out a way to have the specific overlay associated with the specific div clicked on to display without hardcoding that, since the number of divs will change all the time. I would think I could use something like $(this) or event.target, but things I tried didn't work.
Hopefully I was clear enough with my issue and made it general enough for other people to use too. Thanks for any help in advance!

This uses DOM traversal functions to find the corresponding DIVs to the one that was clicked.
$(".resource-video").on("click", function(){
var overlayContainer = $(this).next();
var videoPlayer = overlayContainer.children(".video-player");
openModal(overlayContainer, false, true);
if (videoPlayer.hasClass("hide")){
videoPlayer.removeClass("hide").addClass("show");
overlayContainer.animate({ height:'300px', width: '500px' }, "slow");
}
return false;
});
// Only need to bind this once, not every time .resource-video is clicked.
$("#overlay").on("click", function(){
$(".video-player").removeClass("show").addClass("hide");
$(".overlay-container").css({ "height":"50px", "width":"50px",
"display":"none"});
$(this).hide();
});
// Probably not totally necessary, but just in case
function closeModals(){
$(".modal").hide();
$("#overlay").hide();
$("body, html").removeClass("no-scroll");
};
function openModal(div, allowScroll, blockScreen){
closeModals();
div.show();
if ( blockScreen == true ){ $("#overlay").show(); };
if ( allowScroll == false ){ $("body, html").addClass("no-scroll"); };
};

Jquery show/hide div- minor tweak

I have the following javascript that shows or hides a div when a link is clicked:
<script type="text/javascript">
$(document).ready(function(){
$('.show_hide').showHide({
speed: 500, // speed you want the toggle to happen
changeText: 0, // if you dont want the button text to change, set this to 0
showText: 'View',// the button text to show when a div is closed
hideText: 'Close' // the button text to show when a div is open
});
});
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide',
};
var options = $.extend(defaults, options);
$(this).click(function () {
// this var stores which button you've clicked
var toggleClick = $(this);
// this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
// here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
// this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
</script>
The problem is, I have two such divs, but I only want one to be displayed at a time. So, if someone clicks on the link to display div 2, and div 1 is already displayed, it should hide itself first before displaying div2.
Relevant HTML:
<div class="button">FAQs</div>
<div class="button">Contact</div>
<div id="faq" class="faq">FAQs here </div>
<div id="contact" class="faq">Contact form here </div>
I don't have any experience with JS/Jquery, but I tried adding this code, which didn't work:
var otherDiv;
if ($(this).attr('rel') == 'contact')
otherDiv = 'faq';
else
otherDiv = 'contact';
if ($(otherDiv).is(":visible"))
$(otherDiv).slideToggle(options.speed);

Most people use CSS classes as a place to store 'metadata'. When a div becomes visible, add a class to it like "toggledVisible" or whatever. When a new toggle is clicked, find all instances of "toggledVisible", hide them, and remove that class.
Alternatively, you always keep track of some sort of "currentlyVisible" object and toggle it.

Maybe jQuery ui accordion is an alternative?
HTML:
<div class="accordion">
<h3>FAQs</h3>
<div id="faq" class="faq">FAQs here</div>
<h3>Contact</h3>
<div id="contact" class="faq">Contact form here</div>
</div>
JS:
jQuery(document).ready(function() {
jQuery(".accordion").accordion();
});
Also see my jsfiddle.
=== UPDATE ===
JS:
jQuery(document).ready(function() {
jQuery(".accordion").accordion({
autoHeight: false
});
});
Also see my updated jsfiddle.

Try to add this row in your click() function
$('.faq').not(this).hide();
This will hide all shown divs except the one you clicked.

Jquery getting two divs to act as one

I have the following code for my popup menu, the parent link is the top level link. It causes a popup to show. Popup fades in and fades out when the mouse enters and exits parent link.
However, I need it to not fade out the popup, if the mouse is over the popup! At the moment, as soon as the mouse enters the popup it fades it out. I need both divs to act as one for the hover, if this makes any sense!
// Hovering over the parent <li>
ParentLink.hover(
function()
{
Popup.fadeIn(300, function() {
});
},
function()
{
Popup.fadeOut(400, function() {
});
}
);

You should nest the popup inside the parent. This way when you move the mouse from the parent to the popup, the parent will still be in a mouse-over state because popup's mouse-over event is bubbled onto the parent. When the mouse is out of the parent (plus its children), mouse-out event will fire on the parent.
Edit
If you are not able to (or want to) change the markup, one possibility is to move the elements to the recommended positions using jQuery, like:
ParentLink.append(Popup); // moves the Popup element from its current position
// and places it as the last child of ParentLink
Most probably you'll have to modify your CSS to match the changes so you may want to think first.

you could unbind the hover-event for the parentlink on completion of the fadein.
Popup.fadeIn(300, function() {
$(ParentLink).unbind('hover');
});

This is not a direct answer to your question but a hint how this could work.
Why don't you nest the the 2nd <div> into the first one, so the out will not occur?
<div id="ParentLink">
<div id="Popup"></div>
</div>
Have #ParentLink { display: relative; } and #Popup { display: absolute; } and you will be fine.
But for those menu's I would always use a nested unordered list structure like this one:
<ul id="topLevel">
<li id="level1item">
Link
<ul id="subLevel">
<li>
Link 2
</li>
</ul>
</li>
</ul>

As said, unbind the event while you are hover the popup and then re-bind it when you are hovering out :
ParentLink.hover(
handlerIn,
handlerOut
);
var handlerIn = function()
{
Popup.fadeIn(300, popupFadeIn);
};
var handlerOut = function()
{
Popup.fadeOut(400);
};
var popupFadeIn = function() {
$(ParentLink).unbind('hover');
$(this).mouseleave( function () {
$(ParentLink).hover(
handlerIn,
handlerOut
);
});
};
btw, I didn't tested this

You can try this:
var inn;
$('ParentLink').hover(function() {
inn = false;
$('p').fadeIn(1000);
},
function() {
$('Popup').bind('mouseenter mousemove',
function() {
inn = true;
}).mouseout(function() {
inn = false;
});
if (!inn) $('Popup').fadeOut(1000);
});

Jquery menu slide up from from bottom of screen on hover

I want to only show the menu phrases "music, newsletter, contact" fixed at the bottom of the screen. On hover I want them to slide up and reveal hidden content. here's exactly what I mean:
http://sorendahljeppesen.dk/
See the bottom of the screen. Anyone know how this would be accomplished? Thank you.
P.S. also, would anyone know what type of MP3 player that is?

Put your hidden content into a div such as;
<div class="hiddenContent">...</div>
Then give your links at the bottom of the page a class such as;
Music
Then tell the Jquery to show the hidden content when you hover over the link;
$('.bottomLink').hover(
function () {
// Show hidden content IF it is not already showing
if($('.hiddenContent').css('display') == 'none') {
$('.hiddenContent').slideUp('slow');
}
},
function () {
// Do nothing when mouse leaves the link
$.noop(); // Do Nothing
}
);
// Close menu when mouse leaves Hidden Content
$('.hiddenContent').mouseleave(function () {
$('.hiddenContent').slideDown('slow');
});

Try this code:
ASPX section,
<div id="categories-menu" class="hover-menu">
<h2>Categories</h2>
<ul class="actions no-style" style="display: none">
<li>//Place your content here that should show up on mouse over</li>
</ul>
</div>
JQuery section,
<script type="text/javascript">
$(document).ready(function() {
function show() {
var menu = $(this);
menu.children(".actions").slideUp();
}
function hide() {
var menu = $(this);
menu.children(".actions").slideDown();
}
$(".hover-menu").hoverIntent({
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 50, // number = milliseconds for onMouseOver polling interval
over: show, // function = onMouseOver callback (required)
timeout: 300, // number = milliseconds delay before onMouseOut
out: hide // function = onMouseOut callback (required)
});
});
</script>
Hope this helps...

I have found this great article with live demo and source code to download, the article show how to make a slide out menu from bottom.