Develop Reference

Our dropdown is tabbable even when not expanded

We want our dropdown to be tabbable once expanded but non tabbable when not expanded. We have tried tabindex="-1" on the content in the expandable div but that made it non tabbable even once expanded. We have no idea on how to to solve this and would be grateful to any tips.
<div class="container">
<div class="accordionContent">
<div class="accordionItem">
<button class="itemHeader itemQuestion">
Text
<span class="itemIcon">
<i class="bx bx-chevron-down"></i>
</span>
</button>
<div class="itemContent">
<p class="itemAnswer">
<button>Example</button>
</p>
</div>
</div>
</div>
</div>

I dont know exactly what you want to do but If you want to showdiv.itemContent with click on the button.itemHeader you can do this :
-set display:none ;for div.itemContent
-use onclick event for button.itemHeader. And call this function :
function myfunction(){ document.getElementsByClassName[0]("itemContent").style.display=block; }

show only one div hide multiple div

I have multiple div which has the same class and I want to display only one div per click which belongs to the parent div. I want to hide and show div "post-reply-box".
HTML
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i></a>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p> </div>
<div class="comnt comnt-reply">
<div class="post-reply-box" style="padding:10px; display: none;">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton">cancel</button>
</form>
</div>
</div>
jQuery
$(document).ready(function(){
$(".fa-reply").on("click",function(){
$(".post-reply-box").css("display","block");
});
});
$(document).ready(function(){
$(".cancelButton").on("click",function(){
$(".post-reply-box").css("display","none");
});
});

The issue in your code is because you're using a class selector which retrieves all the .post-reply-box elements in the DOM, not just the one relevant to the button which was clicked.
To fix this use DOM traversal to relate the elements to each other. In this specific example use closest() to get the .we-comment related to the button, then next() to get the .comnt-reply container, then find().
In addition there some other issues which need to be addressed:
There's no need to duplicate document.ready handlers. Put all the logic in a single one.
Use show() and hide() instead of css() to set the display state of the element.
Use a CSS file instead of inline style elements to set style rules.
Attach the event handler to the a element, not the child i, and call preventDefault() on the event that's raised.
Add the type="button" attribute to the Cancel button so that clicking it does not submit the form.
With all that said, try this:
jQuery($ => { // updated document.ready handler
$(".we-reply").on("click", e => {
e.preventDefault()
$('.post-reply-box').hide(); // hide all
$(e.target).closest('.we-comment').next('.comnt-reply').find(".post-reply-box").show(); // show relevant
});
$(".cancelButton").on("click", function() {
$(".post-reply-box").hide();
});
});
.post-reply-box {
padding: 10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>

Notifications Dropdown not showing

Following is my code to show the notification list on clicking the icon. But the dropdown of notifications list is not showing. As for the CSS there is only bootstrap added. Following attached is my HTML and JavaScript with mock method.
function getMessageNotificationsDetails() {
$("#messageNotificationsDetails").html("");
$("#messageNotificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
$("#messageNotificationsDetails").append("<li><p class='red'>You have 6 new messages</p></li>");
}
function getNotificationsDetails() {
$("#notificationsDetails").html("");
$("#notificationsDetails").append("<li><p class='red'>You have 5 new messages</p></li>");
$("#notificationsDetails").append("<li><p class='red'>You have 56 new messages</p></li>");
}
<div class="col-md-1 text-center text-md-right">
<div class="row">
<div class="col-md-6">
<div class="notification">
<i style="cursor: pointer;" onclick="getMessageNotificationsDetails()" class="fa fa-envelope-o">
</i>
<span id="messageCount" class="badge"></span>
<ul id="messageNotificationsDetails" class="notification-menu">
</ul>
</div>
</div>
<div class="col-md-6">
<div class="notification">
<i style="cursor: pointer;" onclick="getNotificationsDetails()" class="fa fa-bell-o">
</i>
<span id="notificationsCount" class="badge"></span>
<ul id="notificationsDetails" class="notification-menu">
</ul>
</div>
</div>
</div>
</div>

I only see 2 problems.
unreadMessageCount is undefined
Each time you use .html() you are overwriting the html content of the element. It will work in your case because the last call has content in it.
Also, where and when the script is defined will affect whether or not it is available to the markup. In your case, it needs to be defined before the markup. You could attach the listeners via JS, and then it could run after the markup is rendered.

I have figured out the issue. It was related to data-toggle. I wasn't toggling to show and hide in my code.

In meteor, how to create dynamic id with same class name

I have a card displaying dynamically when I submit the form.
Here is code:
<template name="workflow">
<div id="newActionCard">
{{#each newaction}}
<div class="workflowcard">
<div class="module-card-small">
<div class="res-border"></div>
<div class="card-img">{{team}}</div>
<div class="res-content">
<div class=" newaction-name">{{action_title}}</div><hr>
<div class="newaction-des">{{description}}</div>
<!-- <div class=" due-on">Due on:{{d_date}}</div><hr>-->
</div>
<div class="due">
Due on:
<div>
<div class="day-stamp">{{weekday d_date}}</div>
<div class="date-stamp">{{date d_date}}</div>
<div class="month-stamp">{{month d_date}}</div>
</div>
</div>
{{> actioncardsubcontent}}
</div>
<div class="btn-box">
<button type="button" class="cancelsub">New Action</button>
<button type="submit" class="createbtnsub">Show Options</button>
</div>
</div>
{{/each}}
</div>
</div>
</template>
<template name="actioncardsubcontent">
<div class="subcontent">
<div class="modulepath"><div>{{module_list}}</div></div>
<div class="linkto"><div>Linked To: <div class="linkto-color">{{link}}</div></div></div>
<div class="description"><div>Notes:<br>{{description}}</div></div>
</div>
</template>
when I submit the form the card gets generated with some hidden part by the below JS.
Template.actioncardsubcontent.rendered = function(){
this.$(".subcontent").hide();
};
When I click on "Show Options" button the hidden part will display. and below is the code for that
Template.workflow.events({
"click .createbtnsub":function(){
$('.subcontent).show();
}
});
My question is, when I click on show options button at the output the hidden part is displaying for each card at a time not to the particular card. The reason is I have given the same class name for each and I want to create a dynamic id that allos particular card hide content on click. How to write it. I am stuck there. Can anyone help?
I have tried with below code but it doesn't work.
<div class="action" id={{_id}}> {{> actioncardsubcontent}} </div>
and in JS i replaced $('.subcontent').show(); with var id="#"+this._id; $(id).show(); but it doesn't work. Let me know how to I write for dynamic Id generation for each click.

The idea of your id={{_id}} solution is correct, but you have added the id attribute to a different element than what you hide. Try this:
<template name="actioncardsubcontent">
<div class="subcontent" id={{_id}}>
...
</div>
</template>
Your event handler in the upper template should still find the element if you do
$('#' + this._id).show();
If this does not help, it may be because your data does not have an _id attribute. In that case you could use some other unique identifier or add one with Random.id().

You can try this as this has worked for me.
function(){
$('.className').each(function(i) {
$(this).attr('id', 'idName'+i);
});

Toggle Javascript outside of parent

I have issues when trying to place an event to toggle a div using an element outside of the parent container.
I trying to target the same behavior from outside of the parent elements using a span tag.
Any help would be grateful.
HTML:
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
Javascript:
$('.toggler').live('click',function(){
/* $(this).parent().children().toggle(); //swaps the display:none between the two spans */
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action
});

Amended your example to suit the purpose.
<div id="container">
<div>
<div>
<span class='open'>Open</span>
<span class='close' style='display:none;'>Close</span>
</div>
<div class='content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='close'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggle">Gain Early Access</span>
</div>
$(".toggle").click( function( ) {
$(".content").slideToggle();
});
$(".open").click( function( ) {
$(".content").slideDown();
});
$(".close").click( function( ) {
$(".content").slideUp();
});

Just use a global parent div.
<div id="container">
<div class='toggle_parent'>
<div class='toggleHolder'>
<span class='toggler'>Open</span>
<span class='toggler' style='display:none;'>Close</span>
</div>
<div class='toggled_content' style='display:none;width:100%;height:400px;'>
<h2>Hello This Is My Content Right Here</h2>
<span class='toggler btn btn-large'>Close</span>
</div>
</div>
<!-- I need this element to trigger from outside -->
<span class="toggler btn btn-large btn-info">Gain Early Access</span>
</div>
And you can just do this :
var container = $('#container');
container.on('click', '.toggler', function() {
container.find('.toggleHolder .toggler').toggle();
container.find('.toggle_content').slideToggle();
});
By the way, if you use jQuery 1.7 or more, live is deprecated. See http://api.jquery.com/live/