We Keep Coding

jQuery slideToggle class with dynamically created id

I am trying to hide / show comment replies.
I tried a few methods but couldn't get class with dynamic ids.
My html structure is like this :
<div class="display-comments">
<div class="form-group border-bottom" id="comment-1">
//level - 1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom parentOF-1" id="comment-2">
//level-2 parentOF-1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom parentOF-2" id="comment-3">
//level-3 parentOF-2
</div>
<div class="form-group border-bottom" id="comment-4">
//level-4 doesnt have child
</div>
</div>
I tried like in the following example with different variations.
$(document).on('click', '.show_reply', function(e) {
e.preventDefault();
var commet-id = $('comment-').val();
var parentOF = $('parentOF-').val();
$(this).text() == "show replies" ? $(this).text("show replies") : $(this).text("hide replies");
$(this).closest('parentOF-').nextUntil('parentOF-').slideToggle();
});
But couldn't make it work. Thanks for any help.

You could Hide At comment div's all class that contains parentOf- class ,
$("div[class*='parentOF-']").hide();
then in each button attach event that show child comment on click , otherwise hide child comment and all it's children using recuresive function described in the snippet :
function hideRecurssive(id) {
let $child = $(`.parentOF-${id}`);
if($child.length>0) {
var newId = $child.attr("id")
// get last char that refer to child comment
newId = newId.charAt(newId.length - 1);
$child.slideUp();
var btn = $child.find(".show_reply");
if(btn.length) btn.text("show replies");
hideRecurssive(newId);
};
}
Here a working snippet as I understand :
$(function($) {
$("div[class*='parentOF-']").hide();
$(document).on('click', '.show_reply', function(e) {
e.preventDefault();
let id = $(this).attr("id");
if( $(this).text() == "show replies" ) {
$(this).text("hide replies")
let $childComment = $(`.parentOF-${id}`)
$childComment.slideDown();
} else if($(this).text() === "hide replies") {
hideRecurssive(id);
$(this).text("show replies")
}
});
});
function hideRecurssive(id) {
let $child = $(`.parentOF-${id}`);
if($child.length>0) {
var newId = $child.attr("id")
// get last char that refer to child comment
newId = newId.charAt(newId.length - 1);
$child.slideUp();
var btn = $child.find(".show_reply");
if(btn.length) btn.text("show replies");
hideRecurssive(newId);
};
}
.hide {
color: red;
}
.unhide {
color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="display_comment" class="col-12">
<div class="form-group border-bottom " id="comment-6">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Çeviri, yabancı dili İnternet&amp;#39;teki içerik deryasını tam olarak anlamak için yeterli olmayan kullanıcılar tarafından tercih ediliyor. Bununla birlikte Google Çeviri, her zaman mükemmel t</div>
</div>
<div class="col-12 sttime">2021-01-09 02:23:38
<button type="button" class="btn btn-primary btn-xs reply" id="6">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="6" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-6" id="comment-7">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Translate aracı halihazırda 100&amp;#39;den fazla dil arasında tercüme yapıyor.</div>
</div>
<div class="col-12 sttime">2021-01-09 02:23:56
<button type="button" class="btn btn-primary btn-xs reply" id="7">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="7" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-7" id="comment-8">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Translate çeviriler için yakın zamana kadar Avrupa Parlamentosu ve Birleşmiş Milletler gibi büyük kuruluşların verilerini kullanıyordu. Çeviriler ayrıca sözlük bilgileri ve kullanıcılar tarafın</div>
</div>
<div class="col-12 sttime">2021-01-09 02:24:19
<button type="button" class="btn btn-primary btn-xs reply" id="8">Reply <i class="fas fa-share" aria-hidden="true"></i></button> <button id="8" type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
</div>
</div>
<div class="form-group border-bottom parentOF-8" id="comment-11">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">rew rew ew wre</div>
</div>
<div class="col-12 sttime">2021-01-09 18:10:46
<button type="button" class="btn btn-primary btn-xs reply" id="11">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
<div class="form-group border-bottom " id="comment-9">
<div class="row">
<div class="col-12"><b>Netmaster</b> said!</div>
<div class="row">
<div class="col-2 stimg">
<picture>
<source type="image/webp" srcset="uploads/images/undefined.webp">
<img src="uploads/images/undefined.jpg" alt="netmaster" class="img-fluid">
</picture>
</div>
<div class="col-10 sttext">Google Çeviri nasıl kullanılır? Google Translate anlaşılır bir arayüze sahip ancak keşfedilecek birçok özelliği var.</div>
</div>
<div class="col-12 sttime">2021-01-09 02:24:43
<button type="button" class="btn btn-primary btn-xs reply" id="9">Reply <i class="fas fa-share" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>

Updated as per request. This will allow you to show nested comments and hide them. If you hide a parent comment then all nested comments will be hidden.
N.B. I changed your parentOF- to childOF- because it didn't make sense. You can just change all incidences of the class name in the code below if you'd like to keep it.
All the code is fully commented.
// Add dynamic click event listener
$(document).on('click', '.show_reply', function(e) {
// Toggle button text
if ($(this).text() == "show replies") {
$(this).text("hide replies");
} else {
$(this).text("show replies");
}
// Get comment-id from parent element
commentID = $(this).parent().attr("id");
// Just get id
commentID = commentID.replace("comment-", "");
// Store element
el = $(".childOF-" + commentID);
// Check if element is visible
if (el.is(':visible')) {
// Check for nested comments if hiding
hideNested(commentID);
// Hide element
el.slideUp();
} else {
// Show element
el.slideDown();
}
});
function hideNested(nestedID) {
// Find element that is child of the one passed
nested = $(".childOF-" + nestedID)
// Check if nested comment exists
if (nested.length == 0) {
// Exit function if it does not
return;
}
// Hide comment
nested.slideUp();
// Update button text
nested.find("button.show_reply").text("show replies");
// Check for further nested comments
hideNested(nested.attr("id").replace("comment-", ""));
}
div[class^='childOF'],
div[class*=' childOF'] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-comments">
<div class="form-group border-bottom" id="comment-1">
//level - 1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
<div class="form-group border-bottom childOF-1" id="comment-2">
//level-2 childOF-1
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom childOF-2" id="comment-3">
//level-3 childOF-2
<button type="button" class="btn btn-primary btn-xs show_reply">show replies</button>
</div>
<div class="form-group border-bottom childOF-3" id="comment-4">
//level-4 childOF-3
</div>
</div>
<div class="form-group border-bottom" id="comment-5">
//level-5 doesnt have child
</div>
</div>

Using EJS between script tags

I'm new to EJS and I would like some help with creating divs dynamically out of data rendered with EJS on button click.
In my express file:
res.render("user/profile.ejs", { posts: req.user.posts });
//posts is an array with elements having a similar structure to
/*"posts":[
{
"_id":{"$oid":"5cf9072b74cc8310803c89df"},
"type":"Story",
"subject/genre":"somethin",
"content":"another thing",
"date":{"$date":{"$numberLong":"1559824171334"}}
}
]*/
In my ejs file:
<div class="row">
<div class="col">
<div style="float: right">
<button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="All" style="width: 60px">All</button>
<button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Idea" style="width: 60px">Ideas</button>
<button type="button" class="btn btn-dark btn-sm m-1 loadPosts-btn" id="Story" style="width: 60px">Stories</button>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".loadPosts-btn").click(function(){
$(".posts-row").remove();
if($(this).attr("id") === "All"){
<% posts.forEach(elem=>{ %>
document.getElementsByClassName("container")[0].innerHTML +=
`<div class="row posts-row" style="border: 1px solid black">
<div class="col">
<div class="post-container m-4 p-3">
<h2>${elem.type}</h2>
<h4>${elem["subject/genre"]}</h4>
<p>${elem.content}<p>
<small>${elem.date}</small>
</div>
</div>
</div>`
<% }) %>
};
});
$("#All").click();
});
</script>
It shows an error: elem is not defined. which I think is normal because I didn't pass elem to render().
Briefly, what I want is to add a <div class="row"> to every post in the posts array when the button with id="All" is clicked. I don't know if I should do it in <script> tags or under the <div class="row"> without <script> tags.
Thank you in advance.

Auto click button if style display is block

everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

jQuery get text value from elements from different divs with same class

<div class="panel">
<div class="panel-heading item-name">T-shirt1</div>
<div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$15.32</span></h5>
<h4>$17.56</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt2</div>
<div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$21.67</span></h5>
<h4>$23.15</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt3</div>
<div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$16.69</span></h5>
<h4>$16.80</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.
Here is my jQuery script.
<script>
$('.add-to-cart').click(function() {
var itemName = $('.item-name', this).text();
alert(itemName);
});
</script>

You can try this:
$('.add-to-cart').click(function() {
var itemName = $(this).closest('.panel').find('.item-name').text();
alert(itemName);
});
Usage of the closest method: closest

Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:
$('.add-to-cart').click(function() {
var itemName = $(this).parents('.panel').children('.item-name').first().text();
alert(itemName);
});

Filtering a product carousel using JQuery and Slick

I'm building a carousel of product which has vendor buttons below that allow you to filter them. So the initial display is all the product logos, but pressing the 'Adobe' (for example) button then filters out everything that is not an Adobe product, and pressing the button again unfilters it.
I'm using JQuery with Slick and then a bit of custom javascript to handle the filtering. Let's start with the HTML.
<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="product-carousel">
<div class="item filter-apple"><img class="product" src="images/products/product-fcp7.png" /></div>
<div class="item filter-apple"><img class="product" src="images/products/product-fcpx.png" /></div>
<div class="item filter-apple"><img class="product" src="images/products/product-motion5.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-aftereffects.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-encore.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-indesign.png" /></div>
<div class="item filter-avid"><img class="product" src="images/products/product-mediacomposer.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-photoshop.png" /></div>
<div class="item filter-adobe"><img class="product" src="images/products/product-premierepro.png" /></div>
<div class="item filter-davinci"><img class="product" src="images/products/product-resolve.png" /></div>
<div class="item filter-autodesk"><img class="product" src="images/products/product-smoke.png" /></div>
</div>
<div class="vendors-wrapper">
<ul class="vendors">
<li><button class="btn btn-xs btn-primary product-button" id="button-apple">Apple</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-adobe">Adobe</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-avid">Avid</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-davinci">Davinci</button></li>
<li><button class="btn btn-xs btn-primary product-button" id="button-autodesk">Autodesk</button></li>
</ul>
</div>
</div>
</div>
</div>
As you can see, I'm using a class on the item divs so I can filter them later. Here's the Javascript:
$(document).ready(function(){
$('.product-carousel').slick({
slidesToShow: 8,
autoplay: true
});
});
var filtered = false;
$('#button-apple').on('click', function(){
if(filtered === false) {
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickFilter('.filter-apple');
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-default product-button');
$(this).attr('class', 'btn btn-xs btn-primary product-button');
filtered = true;
} else {
$('.product-carousel').slickUnfilter();
$('.product-button').attr('class', 'btn btn-xs btn-primary product-button');
filtered = false;
}
});
This initiates the Slick slider, then listens for a click on the #button-apple. I'm using the built-in slickFilter method and then a bit of styling on the buttons to visually show that button has been selected. But as you've probably realised, creating a new Javascript function for every vendor is horribly inefficient. Is there a way for the function to know enough about what you've just clicked on for it to use the same function regardless of which one you clicked? Also, the method of setting the var filtered is also a bit flawed since clicking another vendor will (currently) just unfilter rather than unfilter then re-filter to that vendor - so the function ought to know whether the vendor button you've clicked on is already filtered and act on that.
Supplementary question for anyone who knows slick - is there a way to centre all the items in the slider area when there are less than the number of slidesToShow?
http://jsfiddle.net/8vLs9qp6/

So I managed to figure this one out by abandoning the method of looking for a specific id click and instead pulling the vendor name from the id of the list and then using that as a variable. New HTML:
<div class="container" >
<div class="row">
<div class="col-xs-12">
<div class="product-carousel">
<div class="item filter-apple"><img class="product-selector" src="images/products/product-fcp7.png" /></div>
<div class="item filter-apple"><img class="product-selector" src="images/products/product-fcpx.png" /></div>
<div class="item filter-apple"><img class="product-selector" src="images/products/product-motion5.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-aftereffects.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-encore.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-indesign.png" /></div>
<div class="item filter-avid"><img class="product-selector" src="images/products/product-mediacomposer.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-photoshop.png" /></div>
<div class="item filter-adobe"><img class="product-selector" src="images/products/product-premierepro.png" /></div>
<div class="item filter-davinci"><img class="product-selector" src="images/products/product-resolve.png" /></div>
<div class="item filter-autodesk"><img class="product-selector" src="images/products/product-smoke.png" /></div>
</div>
<div class="vendors-wrapper">
<ul class="vendors">
<li id="apple"><button class="btn btn-xs btn-primary product-button">Apple</button></li>
<li id="adobe"><button class="btn btn-xs btn-primary product-button">Adobe</button></li>
<li id="avid"><button class="btn btn-xs btn-primary product-button">Avid</button></li>
<li id="davinci"><button class="btn btn-xs btn-primary product-button">Davinci</button></li>
<li id="autodesk"><button class="btn btn-xs btn-primary product-button">Autodesk</button></li>
</ul>
</div>
</div>
</div>
And then the function to filter the products and change the button states.
$('.product-button').on('click', function(){
var filtername = $(this).parent('li').attr('id');
var currentclass = $(this).attr('class');
if(currentclass == 'btn btn-xs btn-default product-button') {
// currently filtered, turn the others off and this on
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickFilter('.filter-' + filtername);
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-default product-button');
$(this).attr('class', 'btn btn-xs btn-primary product-button');
} else {
// is this the only currently selected vendor or are they all active?
var numberactive = $('.vendors').find('.btn-default').length;
if(numberactive > 0) {
// toggle them all back on
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-primary product-button');
} else {
// switch the others off
$('.product-carousel').slickUnfilter();
$('.product-carousel').slickFilter('.filter-' + filtername);
$('.product-carousel').slickGoTo(0);
$('.product-button').attr('class', 'btn btn-xs btn-default product-button');
$(this).attr('class', 'btn btn-xs btn-primary product-button');
}
}
});
Still would appreciate if anyone knows how to centre items in the slick display window. Currently always seems to be left justified (which looks a bit odd in a wide window when you've filtered down to just one product). Tried the centerMode option, but doesn't seem to do much. I may be using it incorrectly.

Centered the carousel items with css. https://jsfiddle.net/jnallie/hr1155fm/
body {
background: black;
}
.vendors {
list-style: none;
text-align: center;
margin: 0px;
margin-bottom:10px;
padding: 0px;
}
.product-carousel .item {
background: green;
text-align: center;
margin: 0 5px;
}
.product-carousel .item img {
margin: 0 auto;
}
.vendors li {
display: inline-block;
}
.product-selector {
width: 64px;
}