I am trying to develop a page where there would be multiple divs, each of these divs have a button of which would show a "dropdown" style div below it when clicked.
Currently I have some code which when one button is clicked, it shows all of the "dropdown" styled divs on the page instead of just the one in the same container as the button.
I would like this to be done in pure JavaScript without jquery, any help would be appreciated, thank you!
HTML
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog() {
var btn = document.getElementsByClassName("mobileShowActivityFeedBtn");
var activity = document.getElementsByClassName("mobileDropDown");
for(var i=0; i<btn.length; i++) {
for(var j=0; i<activity.length; j++) {
if(activity[j].style.display == "none") {
activity[j].style.display = "flex"
} else {
activity[j].style.display = "none"
}
}
}
}
I think the easiest way is to send a parameter to the method and getElementById with a concatenated string with the parameter.
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(1)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown-1">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(2)"> Show activity feed </button>
</div>
</div>
<div id="mobileDropDown-2">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog(index) {
var activity = document.getElementsById("mobileDropDown-" + index);
if(activity.style.display == "none") {
activity.style.display = "flex"
} else {
activity.style.display = "none"
}
}
One of the best possible ways to achieve this is to pass the current context using 'call' in the HTML. Use this context to target the required result container(here 'mobileDropDown' container).
function mobileActivityLog () {
var _this = this;
var activity = _this.closest('.resultContainer').querySelector(".mobileDropDown");
activity.classList.toggle('hide');
}
.hide {
display: none;
}
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
Related
I want to show a modal popup when the user clicked a button, but it keeps adding to the innerHTML
<div class="popup-container hide">
<div class="popup-wrapper">
<!-- <div class="popup-content"> -->
<!-- </div> -->
<div class="order-container">
<div class="value-container">
<button class="minusBtn"><img src="icon/minus.png" alt="" width="30px"></button>
<div class="value">1</div>
<button class="plusBtn"><img src="icon/plus.png" alt="" width="30px"></button>
</div>
<button class="orderBtn">Add To Cart</button>
</div>
</div>
</div>
Here I create a new div and insert it into the parent, and showing the clicked data with literal template
let content = document.createElement('div');
content.classList.add('popup-content');
content.innerHTML = `
<div class="popup-image">
<img src="mcd/${item.img}" alt="">
</div>
<div class="popup-name">
${item.name}
</div>
<div class="popup-price">
${item.price}
</div>
`;
let wrapper = document.querySelector('.popup-wrapper');
let orderContainer = document.querySelector('.order-container');
wrapper.insertBefore(content, orderContainer);
You need to remove all existing .popup-content elements before you insert a new one if you want only one to appear.
document.querySelectorAll('.popup-content').forEach(el => el.remove());
let content = document.createElement('div');
...
I am trying to create multiple popups on one page that would appear after clicking a button corresponding to them. I currently have them under the same class, as in here:
<div>
<!-- Popup -->
<div class="popup">
<div class="popup-content">
Some text here
</div>
</div>
<!-- Button -->
<img src="button.png" class="popup-button"/>
</div>
The problem is that I am struggling to access individual elements with my javascript code. I am not sure what to replace the manual array accessing ( [0] right now ) with.
<script>
// Get the popup
var popup = document.getElementsByClassName("popup")[0];
// Get the button that opens the popup
var btn = document.getElementsByClassName("popup-button")[0];
// When the user clicks the button, open the popup (hidden by default)
btn.onclick = function() {
popup.style.display = "block";
}
</script>
Now, I could create multiple scripts and access the arrays manually for each element but of course I am trying to automate it, so that script would run depending on which button was clicked. Say, if 5th button was clicked, 5th popup appears. Thank you!
Best way to link multiple elements in Javascript is using an id through the dataset of the elements.
// Get the popup's btn list
var popupsBtn = document.getElementsByClassName("popup-btn");
// Go through the popup's btn list
for (var i = 0; i < popupsBtn.length; i++) {
// Define the onclick event on popup's btn
popupsBtn[i].onclick = function() {
// Get the popup associated to the btn with the data-popup-id
var popup = document.getElementById("popup-" + this.dataset.popupId);
// Use a class to toggle popup visible or not
popup.classList.toggle("visible");
}
}
.popup {
display: none;
}
.popup.visible {
display: block;
}
<!DOCUMENT html>
<html>
<head></head>
<body>
<div>
<div id="popup-1" class="popup">popup 1 here</div>
<img src="button.png" class="popup-btn" data-popup-id="1" />
</div>
<div>
<div id="popup-2" class="popup">popup 2 here</div>
<img src="button.png" class="popup-btn" data-popup-id="2" />
</div>
<div>
<div id="popup-3" class="popup">popup 3 here</div>
<img src="button.png" class="popup-btn" data-popup-id="3" />
</div>
</body>
</html>
Given your HTML, it would probably be easiest to just access the previous sibling of the clicked button to get to the .popup, and then change its style:
document.querySelectorAll('.popup-button').forEach(button => {
button.onclick = () => {
button.previousElementSibling.style.display = 'block';
};
});
.popup {
display: none;
}
<div>
<div class="popup">
<div class="popup-content">
Some text here1
</div>
</div>
<img src="button.png" class="popup-button" />
</div>
<div>
<div class="popup">
<div class="popup-content">
Some text here2
</div>
</div>
<img src="button.png" class="popup-button" />
</div>
<div>
<div class="popup">
<div class="popup-content">
Some text here3
</div>
</div>
<img src="button.png" class="popup-button" />
</div>
You can use other attributes to identify the button. You could not rely on the className alone.
You can use data-id attribute and pass it in the method. using this.
Depending on your HTML structure, there are multiple possibilities.
Anyway, I suggest you to use .querySelectorAll() to get your elements, and then use a .forEach() to execute your code.
I tried to use much of your code to make it work correctly.
With a parent div
// Get all the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");
btns.forEach(function(btn, index) {
// When the user clicks the button, open the popup that is in the same parent div
btn.onclick = function() {
btn.closest('div').querySelector('.popup').style.display = "block";
}
});
.popup {
display: none;
}
<div>
<div class="popup">
<div class="popup-content">Pop-up 1</div>
</div>
<img src="button.png" class="popup-button" />1
</div>
<div>
<div class="popup">
<div class="popup-content">Pop-up 2</div>
</div>
<img src="button.png" class="popup-button" />2
</div>
<div>
<div class="popup">
<div class="popup-content">Pop-up 3</div>
</div>
<img src="button.png" class="popup-button" />3
</div>
Without a parent div
// Get the popups
var popups = document.querySelectorAll(".popup");
// Get the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");
btns.forEach(function(btn, index) {
// When the user clicks the button, open the popup (hidden by default)
btn.onclick = function() {
popups[index].style.display = "block";
}
});
.popup {
display: none;
}
<div class="popup">
<div class="popup-content">Pop-up 1</div>
</div>
<img src="button.png" class="popup-button" />
<br>
<br>
<div class="popup">
<div class="popup-content">Pop-up 2</div>
</div>
<img src="button.png" class="popup-button" />
<br>
<br>
<div class="popup">
<div class="popup-content">Pop-up 3</div>
</div>
<img src="button.png" class="popup-button" />
This solution withour parent div will work even if the popups and the buttons are not next to each other. But the order (and index) of the elements need to be the same. See it here:
// Get the popups
var popups = document.querySelectorAll(".popup");
// Get the buttons that opens the popups
var btns = document.querySelectorAll(".popup-button");
btns.forEach(function(btn, index) {
// When the user clicks the button, open the popup (hidden by default)
btn.onclick = function() {
popups[index].style.display = "block";
}
});
.popup {
display: none;
}
<img src="button.png" class="popup-button" />1
<img src="button.png" class="popup-button" />2
<img src="button.png" class="popup-button" />3
<div class="popup">
<div class="popup-content">Pop-up 1</div>
</div>
<div class="popup">
<div class="popup-content">Pop-up 2</div>
</div>
<div class="popup">
<div class="popup-content">Pop-up 3</div>
</div>
Hope it helps.
I have a <div> which contains a <button>. When this button is clicked, I want this <div> to be hidden and another new <div> to be shown in place of the current <div>. Also, the new <div> contains a <button>, which when clicked opens the old <div>. This will enable me to open one <div> at a time on click of the <button> present in those <div>. Can anyone tell me how to do this in AngularJS?
This picture shows my requirement
<body ng-init="showDiv = true">
<div ng-show="showDiv">
<h1>Div 1</h1>
<button ng-click="showDiv = false">Show Div 2</button>
</div>
<div ng-hide="showDiv">
<h1>Div 2</h1>
<button ng-click="showDiv = true">Show Div 1</button>
</div>
</body>
CodePen: https://codepen.io/RaymondAtivie/pen/OXYRyE
Please try something similar to below: use ng-click and ng-show
<div ng-show="!showDiv">
<button ng-click="showDiv=true"></button>
</div>
<div ng-show="showDiv">
<button ng-click="showDiv=false"></button>
</div>
Using ngShow:
<div ng-show="condition" ng-init="condition = true">
<button ng-click="condition = false">Toggle</button>
</div>
<div ng-show="!condition">
<button ng-click="condition = true">Toggle</button>
</div>
But keep in mind to seperate logic like the toggle in ngClick from the view and put it in the controller.
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I'm working on a UI that has Twitter feeds. I want to be able to open a panel in the middle of two tweets, pushing the tweet below downwards. This functionality can be seen in tweet clients like TweetBot. As each new tweet in the stream popped up it would push each one below it down as well. Tool bar would be the same for all tweets.
Here is what I have for the JS:
$(document).ready(function() {
hidden = true;
$("div#tweetcontainer").click(function() {
if (hidden == false) {
$("div#toolbar").slideUp('fast');
hidden = true;
} else {
$("div#toolbar").slideDown('fast');
hidden = false;
}
});
});
Here is the markup of the HTML:
<div id="wrapper">
<!------------- Indivdual Tweet -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!------------- Indivdual Tweet 2 -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<div id="toolbar">
<div class="toolset">reply</div>
<div class="toolset">Retweet</div>
<div class="toolset">Favorite</div>
<div class="toolset">Track</div>
<div class="toolset">Details</div>
</div>
</div>
Do
$toolbar = $(.toolbar).clone();
$(this).after($toolbar);
I guess you will have to do something like
$(.toolbar).addClass("hidden");
before you appending it to the div, and then do
if ($(.toolbar)).hasClass("hidden"){
...pulldown...
}
or something to keep it disappeared and make it pullDown after appending.