We Keep Coding

How to use the same function for different buttons to display their own dropdown lists

I am going to have multiple dropdown buttons to show their own dropdown lists. In HTML, the dropdown lists are the sibling elements of buttons. When I use the querySelector and click whichever button, the first buttons dropdown list shows up naturally. Which selector should I use instead or any other solutions? How can I use buttonDropdown() function for each button?
Thanks in advance.
<div class="container">
<button class="dropdown-button">
<!-- content -->
</button>
<div class="dropdown-button-list">
<!-- content -->
</div>
</div>
const dropdownButton = document.querySelector('.dropdown-button')
dropdownButton.addEventListener('click', showDropdown)
function showDropdown() {
document.querySelector.('dropdown-button-list').classList.add('show')
}

If you associate them together inside of an element (like I used class='dropdown-group') then you can easily find the associated list to the button by utilizing an event listener and
evt.target.closest('.dropdown-group').querySelector('.dropdown-button-list')
window.addEventListener('load', () => {
document.querySelectorAll('.dropdown-button').forEach(el => el.addEventListener('click', e => buttonDropdown))
})
function buttonDropdown(evt) {
// button is evt.target
// associated dropdown is:
// evt.target.closest('.dropdown-group').querySelector('.dropdown-button-list')
}
<div class="container">
<div class='dropdown-group'>
<button class="dropdown-button">
<!-- content -->
</button>
<div class="dropdown-button-list">
<!-- content -->
</div>
</div>
</div>

How to get different parent class for different elements

I got a content page with some text in it that is full width inside the container. However I want the image in the article to be full width (not inside the container but on the whole screen, so 100% width), and for that the container class needs to be 'container-fluid'. But only for the image and not for the entire article.
Is this possible?
Have the text listen to: 'container' and the image to 'container-fluid'? I'm using bootstrap so the structure needs to stay the same, I can't just add a div around the image tag with class name 'container-fluid'.
Part of my code (posting everything is not needed)
<div class="container relative">
<div class="row">
<!-- Content -->
<div class="col-sm-12 ">
<!-- Post -->
<div class="blog-item mb-20 mb-xs-40">
<!-- Text -->
<div class="blog-item-body">
<!-- <h1 class="mt-0 font-alt"><?echo $contenti[0]['title']?></h1> -->
<?
echo ContentCPS($contenti[0]['description']);
$content = "SELECT * FROM `lb_categories` WHERE alias = '".$conn->real_escape_string($_GET['alias'])."' and id NOT IN ('43') ";
$contentcon = $conn->query($content);
while ($content = $contentcon->fetch_array()){
$article_images = $content['params']; // Get image parameters of the article
$pictures = json_decode($article_images); // Split the parameters apart
$afbeelding .= '<img src="cms/'.$pictures->{'image'}.'">';
}
echo $afbeelding;
echo $contenti[0]['introtext'];
?>
</div>
<!-- End Text -->
</div>
So the image needs to listen to 'container-fluid relative', and the rest to 'container relative', if that is possible.

You can get the immediate parent for specific element:
$(this).closest("div.container");

Replace Content of a Div on single page site

So I've been building a site based off a template I found online, a would appreciate any help getting it to function how I want it to. Currently its set up with filters that allow you to sort through multiple thumbnails. However I want the links that currently act as "filters" to instead replace the div where all the thumbnails show up.
I've searched around here looking at jQuery, to replace div content, including replacing the contents of the div, and hiding divs and showing them on click. Nothing I seem to do works though.
Ideally, I'd wrap the current UL in a div named "designprojects" and then when I click a filter that div gets replaced with a new one that has project info in it.
Here is the current HTML and Javascript that the site uses to make the filters function:
filter = function() {
if ($('#projects').length > 0) {
var $container = $('#projects');
$container.imagesLoaded(function() {
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector: '.item-thumbs',
layoutMode: 'fitRows'
});
});
// filter items when filter link is clicked
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Projects</li>
<li>All Projects</li>
<li>Starbucks CSR Project</li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul class="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 StarbucksCSR">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Project Title" href="_include/img/work/full/url.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/url.jpg" alt="Project info">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
To recap, when I click "All Projects" I want to see thumbnails that I can click and make full screen (current function, also want this to be the default).
When I click a project name, I want the div that holds all the thumbnails to be replaced with a paragraph about the project, and additonal thumbnails that can be clicked to extend to full screen.
My current progress can be seen at www.codyshipman.com

Look in the jQuery's .html() function. If you want to replace content of a <div> element, pass the new content as parameter to the .html(newContentAsString) function, for that <div> element. Look at the documentation for more info.

Scope issue in Javascript when writing to an array

BACKGROUND
I have a list of buyerNames and want the admin user to be able toggle their names. So far so good. Visually it works as expected. Admin user clicks on name and it's toggled on (background around the name and the items changes shade). Admin user can click and unclick names to his heart's desire.
CODE BELOW: I'm showing large sections of my code in case I'm messing something up in
a place where I don't think there's a problem.
<div class="headerSecondaryBg"> <!-- THE BACKGROUND LAYER - POSITION AND COLOR -->
<div class="buyerItems"> <!-- NUMBER OF BUYER ITEMS -->
<div class="item i1">42</div>
<div class="item i2">31</div>
<div class="item i3">57</div>
<div class="item i4">49</div>
<div class="item i5">16</div>
<div class="item i6">38</div>
<div class="item i7">24</div>
</div>
<div class="buyerNames"> <!-- BUYER NAMES -->
<div class="buyer b1">BUYERNAME 1 </div>
<div class="buyer b2">BUYERNAME 2 </div>
<div class="buyer b3">BUYERNAME 3 </div>
<div class="buyer b4">BUYERNAME 4 </div>
<div class="buyer b5">BUYERNAME 5 </div>
<div class="buyer b6">BUYERNAME 6 </div>
<div class="buyer b7">BUYERNAME 7 </div>
</div>
<div class="selectBuyer"> <!-- CREATES THE VISIBLE ON / OFF FOR THE TOGGLE AS PER DESIGN SPEC -->
<div class="selectBuyerOff b-on1"></div>
<div class="selectBuyerOff b-on2"></div>
<div class="selectBuyerOff b-on3"></div>
<div class="selectBuyerOff b-on4"></div>
<div class="selectBuyerOff b-on5"></div>
<div class="selectBuyerOff b-on6"></div>
<div class="selectBuyerOff b-on7"></div>
</div>
</div><!-- // END headerSecondaryBg -->
BACKGROUND
After the admin user has selected his buyers he clicks "show items" to reveal a hidden div below.
PROBLEM: Putting the toggled names into an array.
STEP 1:
Get buyerName (b-on1, b-on2 ... in this test example) and place in array.
$(".selectBuyer div" ).click(function(){
$(this).toggleClass("selectBuyerOn"); // show user that items are on or off
var all=$(this).attr('class');
console.log(all);
console.log = selectBuyerOff b-on1 selectBuyerOn.
EXACTLY WHAT WAS EXPECTED (considering I clicked on buyer 1)
STEP 2:
OK. Let's just have b-on1 and get rid of the other classes.
$(".selectBuyer div" ).click(function(){
$(this).toggleClass("selectBuyerOn"); // show user that items are on or off
var all=$(this).attr('class');
bbb=$(this).attr('class').split(' ')[1];
console.log(all);
console.log(bbb);
I get what's expected:
console.log(all) = selectBuyerOff b-on1 selectBuyerOn
console.log(bbb) = b-on1
STEP 3:
NOW let's put it into an array. (This goes immediately after the above code)
testArr=[];
testArr.push(all);
testArr.push(bbb);
console.log(testArr);
console.log = ["selectBuyerOff b-on1 selectBuyerOn", "b-on1"]
Now here's the problem - the array resets itself after every click.
I want the array to have b-on1 and b-on2 if the user selected those and
b-on1 and b-on2 if the user selected b-on1, b-on2, b-on3 (and then untoggled b-on3)
and yet the array is reset after every click.
How do I get this to work?
I tried removing var so that the variable would be in the global scope. I must be missing something simple.

When testArr=[] is executed, the testArr variable is assigned to a brand new empty array.
It sounds like you need to initialize this array just the once outside of the click handler, and then simply push values into the existing array within the handler. For example:
var testArr = [];
$(".selectBuyer div" ).click(function(){
$(this).toggleClass("selectBuyerOn"); // show user that items are on or off
var all=$(this).attr('class');
bbb=$(this).attr('class').split(' ')[1];
testArr.push(all);
testArr.push(bbb);
console.log(testArr);
/* ... */
});

Pulling Instagram feed into a nested Div using ID

I have a div that's nested in two other divs but isn't pulling in the Instagram feed via the ID, although when I take the div out and have it on it's own it displays.
How can I change the code either in the js file or the HTML for get it to display when its nested
Here's the related part of the JS file...
$(function() {
var cmdURL, embedImage, onPhotoLoaded, param, tag_name, userid,
param = {
access_token: '******************', // feel free to change it with your own access token
count: 10 // the total number of images
},
tag = 'Gezza', // your user id. you can find this one out by looking into one of your pictures uri
tag_name = '#photowall',
cmdURL = 'https://api.instagram.com/v1/tags/' + tag + '/media/recent?callback=?';
And here's the HTML
<div class="col-md-4 col-sm-4 home3block">
<div class="block">
<img src="assets/images/instagram-logo.gif">
<!-- START PHOTOWALL -->
<div id="photowall">
</div>
<!-- CLOSE PHOTOWALL -->
</div>
</div>
I need the #photowall to be inside both col-md-6 and block divs