Develop Reference

Why the icon is not displayed in the web page?

I have a HTML like the below,
<div id ="div1">
<a class="dropdown-item" href="#" id="success">
<i class="" id="successIcon"></i>
// I need to add the text Success here
</a>
</div>
In Js
Var divId = document.getElementById('div1');
$(divId).find('#success').append("Success"); // Appends everytime "Success" when the PAge is loaded.
Even If I try using,
$(divId).find('#success').text("Success");
$(divId ) .find("#successIcon").attr("class", "fa fa-success text-success");
// The icon "Success" is not appended to the front of the text "Success", if I use text().
I need the Text as well as the Icon infront of the text.
Could anyone please help?
Many thanks.

You dont have to use find. You can just use a selector on in $().
So you can use:
$('#success').append("Success");
$('#success #successIcon').attr("class", "fa fa-success text-success")
Or since you use id's (which should be unique) you can use:
$('#success').append("Success");
$('#successIcon').attr("class", "fa fa-success text-success")

Try this.i think this is what you are trying to do.
$('#div1 .dropdown-item').append('Success Message here');
$('#div1 .dropdown-item #successIcon').attr('class', 'fa fa-success text-success');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id ="div1">
<a class="dropdown-item" href="#" id="success">
<i class="" id="successIcon"></i>
</a>
</div>

As presented in your question, your code does work (see snippet below)
But there are several things you're not doing tidily:
use const/let, not var anymore
use jquery selectors instead of document.getElementById. That's the power of jQuery
fa-success does not exist in font awesome. You can use fa-ckeck instead
//Your original code. Just corrected case fo "var" and used "fa-check"
var divId = document.getElementById('div1');
$(divId).find('#success').append("Success");
$(divId).find("#successIcon").attr("class", "fa fa-check text-success");
// How you should have written it
const div2 = $('#div2');
div2.find('#success').append("Success");
div2.find('#successIcon').addClass("fa fa-check text-success");
<!--This is frameworks inclusion -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" />
<!--This is your original html, minus the faulty comment-->
<div id ="div1">
<a class="dropdown-item" href="#" id="success">
<i class="" id="successIcon"></i>
</a>
</div>
<!--This is for second example-->
<div id ="div2">
<a class="dropdown-item" href="#" id="success">
<i class="" id="successIcon"></i>
</a>
</div>

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>

Limit no of items can select

I need to write a code that allows only 5 icons to select, so far i was able to write a code that changes the color of selected icon (image: icon 1 and icon 2), others remain grey until they are selected, now i want to limit the selection to only 5 icons and then user cant click on icons.
The code for icon is
<div class="row">
<div class="col-4 col-sm-1 icon">
<a href="javascript:void(0);" class="btn-network btn-facebook" data-status="1" onclick="" title="FaceBook">
<i class="fa fa-facebook"></i>
</a>
<p class="pt-1 pb-2 m-0">FaceBook</p>
</div>
<div class="col-4 col-sm-1 icon">
<a href="javascript:void(0);" class="btn-network btn-instagram btn-invalid" data-status="1" onclick="" title="Instagram">
<i class="fa fa-instagram"></i>
</a>
<p class="pt-1 pb-2 m-0">Instagram</p>
</div>
<div class="col-4 col-sm-1 icon">
<a href="javascript:void(0);" class="btn-network btn-linkedin btn-invalid" data-status="1" onclick="" title="LinkedIn">
<i class="fa fa-linkedin"></i>
</a>
<p class="pt-1 pb-2 m-0">LinkedIn</p>
</div>
</div>
The code is use to select icons
<script>
$('.btn-network').click(function() {
$(this).toggleClass('btn-selected');
});
</script>
the design
[![Selected icons are in color, non selected ones are in grey][1]][1]
[1]: https://i.stack.imgur.com/3ysqj.png
this is something similar i want,but i want to do it for icons instead on checkboxes. : http://jsfiddle.net/vVxM2/
Edit: i also want to display a DIV below, basically what i need is;
user can select upto 5 social media icons and then they will see a box below (activates/displays after selection) to enter user's social profile link.
NOT IMPORTANT: preferably adding new class to disabled icons (ex: disabled) so i can change the color of the icon for disabled ones
can you help please?
thank you

check the length of selected icons before toggling class
const limit = 5;
$('.btn-network').click(function() {
if($(this).parent().siblings().children('.btn-selected').length < limit) {
$(this).toggleClass('btn-selected');
}
});

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.

Select all but this element

I have a few accordions setup and I'd like only one to be open throughout the whole page. I thought that the .not() method would achieve what I wanted however it is just immediately closing the current div.
Here is what I have if anyone can spot where I've gone wrong:
JS
$( document ).ajaxComplete(function() {
$('.accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().stop().slideToggle('1000');
$(this).toggleClass('active').siblings().removeClass('active');
//Hide the other panels
$('.accordion-content').not(this).slideUp('1000');
});
});
HTML
<div id="location1">
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
</div>
<div id="location2">
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>
</div>
CSS
.accordion-content {
display: none;
padding:20px 0;
border-bottom: 1px solid #d4d5d7;
}
.accordion-content.default {display: block;}
.accordion-toggle {
cursor: pointer;
font-size:18px;
padding:10px 0;
margin:0;
border-bottom:1px solid #d4d5d7;
position:relative;
}

You were pretty close. You should change this line
$('.accordion-content').not(this).slideUp('1000');
To This:
$('.accordion-toggle').not(this).next().slideUp('1000');
Since your click function is applied to the accordion-toggle class, you have to target that class since this is an accordion-toggle class element, and you want to filter out all elements that are not this object. This will also force you to have to use the .next() method since you're looking to slide the next element in the DOM.
Edit 1:
In order to remove the active class across all of the #locationX divs, you should separate this line
$(this).toggleClass('active').siblings().removeClass('active');
Into this:
$('.active').not(this).removeClass('active');
$(this).toggleClass('active');
The way it was written previously, after the active class is toggled on the current element, it will only remove that class from all sibling elements, which won't properly affect elements in the other divs. It makes the script a bit longer, but it will remove all of the active classes before toggling the class on the current element.
Edit 2:
The simplest solution for the whole function is probably the following:
$('.accordion-toggle').click(function(){
//Expand or collapse this panel
$(this).next().stop().slideToggle('1000');
//Hide the other panels
$('.accordion-toggle').not(this).removeClass('active').next().slideUp('1000');
$(this).toggleClass('active');
});

In your case this is the toggle not the content (it would also have to be $(this) not just this, so:
$('.accordion-content').not(this).slideUp('1000');
Will match all accordion content.
You could try:
var $content = $(this).next('.accordion-content');
$('.accordion-content').not($content).slideUp('1000');
As a note, I would set var $this = $(this); at the beginning of your handler so that you are not repeatedly creating jQuery objects which is relatively expensive.