Develop Reference

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>

JQuery toggle/html: changing the content in div

I'm currently working on a blog layout with a main div and a side bar with links. I want each link to change the content of the main div.
I tried using toggle and html.
Here's the main class and the content of each link:
<div id="main"></div>
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
And the side bar:
<div id="mainlink">
<button class="linkd" id="butt1"> works </button>
<button class="linkd" id="butt2"> info </button>
<button class="linkd" id="butt3"> Tags </button>
</div>
So when I click on the button "works" I want the content of that div into the main div.
Here's the snippet of the JQuery (that doesn't work):
$(function(){
$('#butt1').click(function() {
$('#main').html($('#works'));
$('#works').toggle();
$('#info').hide();
$('#tags').hide();
});
$('#butt2').click(function() {
$('#main').html($('#info'));
$('#info').toggle();
$('#works').hide();
$('#tags').hide();
});
$('#butt3').click(function() {
$('.mainp').html($('#tags'));
$('#tags').toggle();
$('#info').hide();
$('#works').hide();
});
});
Note: on my CSS I have the display: none as well.

I think it is the easy way to show and hide divs, by assigning a relation to the buttons using HTML5's data attribute (here their ids are used in data-target attribute). See the snippet below...
$(function(){
$('[data-target]').on('click', function(){
var target = $(this).data('target');
$(target).siblings().hide().end().show();
});
});
#main > div:not(:first-child) {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainlink">
<button class="linkd" data-target="#works"> works </button>
<button class="linkd" data-target="#info"> info </button>
<button class="linkd" data-target="#tags"> Tags </button>
</div>
<div id="main">
<div id="works">
These are my works.
</div>
<div id="info">
About me.
</div>
<div id="tags">
Tag list.
</div>
</div>

How to lower opacity on everything else on screen except the selected ng-repeat item?

I've looked everywhere on StackOverflow and there doesn't seem to be anyone else solving this issue or I'm just using the wrong wording or keywords which results in me not finding what I want. If that's the case and this is a duplicate, I would be glad if you could link me to a case like this. Thanks.
I have an HTML/CSS, AngularJS, PHP and MySQL project.
POST and GET requests work perfectly.
What I'm trying to do is similar to what is already done on Google Keep.
When the user clicks on the blue pencil, I want the opacity on the selected item to be 100% but all the parents divs and sibling divs at opacity value 0.3 or something.
I would like to try and avoid jQuery if possible.
I believe I read somewhere that it is bad practice to use a whole bunch of frameworks together and that when you use a framework, that you should stick with it.
I have no idea how to approach this problem.
I don't even know where to start.
Could you please also provide me with a working example JSFiddle or Plnkr please?
Any help or suggestion would be greatly appreciated!
Thanks in advance!
What I want
What I have
HTML
<body ng-app="myApp">
<font face="Source Sans Pro">
<div class="left">
<center>
<div ng-controller="insertController">
<h2> What I learned today </h2>
<form>
Date <br>
<input type="text" ng-model="date"><br><br>
Content <br>
<textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
<input type="button" value="Submit" ng-click="insertdata()">
</form>
</div>
</center>
</div>
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div class="card">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
</div>
</center>
</div>
</font>
</body>
EDIT
I just got it working.
New HTML
<div class="right">
<center>
<div ng-controller="fetchController"><br>
<span ng-repeat="item in results">
<div ng-controller="fadeController">
<div class="card" ng-class="cardFade">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div><!-- theText -->
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div><!-- deleteController -->
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div><!-- editController -->
</div><!-- card -->
</div><!-- fadeController -->
<br>
</span><!-- ng-repeat -->
<div class="overlay"></div>
</div><!-- fetchController -->
</center>
</div><!-- right -->
New CSS
.someCSS {
background-color: white;
z-index: 200;
opacity: 1;
}
.noCSS {
}
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0.6;
z-index: 100;
pointer-events: none; /* required to be able to click buttons under overlay */
}
fadeController.js
app.controller("fadeController", function($scope, $http, resultsService) {
$scope.cardFade = "noCSS";
$scope.editThisItem = function(item) {
if($scope.cardFade === "noCSS") {
$scope.cardFade = "someCSS";
}
else if($scope.cardFade === "someCSS") {
$scope.cardFade = "noCSS";
}
else {
alert("FATAL ERROR!");
}
};
});

you can add a div as overlay
<div class="overlay"></div>
.overlay {
backgound-color: gray;
opacity: 0.5;
z-index: 100; //<= so the overlay with cover the page
}
next you will need to add a css class like this
.someCss {
z-index: 101; // <=so it would be on top on the overlay
}
and it will be added to the ng-repeat element when you click on the blue pencil.
I would even go and make the class as ng-class ng-class
so it would be something like this:
<span ng-repeat="item in results">
<div class="card" ng-class="{someCss : item.selected}">
<div class="theText">
<span class="bold-underline">{{item.date}}</span><br>
{{item.content}}
</div>
<div ng-controller="deleteController">
<input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
</div>
<div ng-controller="editController">
<input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
</div>
</div>
<br><br>
</span>
and now on the blue pencil click you can add the property selected or change it

I want to open reply textbox after clicking on a link using jquery

I'm developing discussion board and I want to make a reply system on each comment using jquery so I can click on a comment link then text box will be opened to write my reply to this comment without loading the whole page.
Here are my Html and PHP code.
<?php
$query = $conn->query("SELECT * FROM comments WHERE article_id = '$ArticleID' ");
$rowCount = $query->num_rows;
if($rowCount > 0)
{
while($row = $query->fetch_assoc())
{
$CommentID = $row['comment_id'];
$Comment = $row['text'];
?>
<li class="comment">
<div class="comment-container">
<div class="comment-meta">
<a class="comment-reply-link link-style3 creply" href="">Reply »</a>
</div>
<div class="comment-body">
<p><?php echo $Comment; ?>.</p>
</div>
</div>
</li>
<li style="list-style: none; display: inline">
<div class="comment_form">
<form action="#" method="post">
<textarea class="span10" name="Comment" rows="6"></textarea><br>
<input class="btn btn-primary" type="submit" value="Reply">
</form>
</div>
<?php
}
}
?>
</li>
And here is my my jquery code that I have a problem on it.
<script type="text/javascript">
$(document).ready(function()
{
$(".creply").click (function(e)
{
e.preventDefault();
$(this).next(".comment_form").show(); // problem here...
//$(".comment_form").show();
});
});
</script>
When I use the comment line in the script It works but without logic.
On click the link it shows all reply form on all comments not on the separate comment I clicked on. The code above I used $(this) to get the comment I clicked but It doesn't do any actions !??
Any Help, please !!??
I'm using this version of jquery
<script src="jquery-3.1.1.min.js">

You just need to select the closest parent with class .comment first, then reach the child element.
$(document).ready(function() {
$(".creply").click(function(e) {
e.preventDefault();
$(this).closest('.comment').next().show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="comment">
<div class="comment-container">
<div class="comment-meta">
<a class="comment-reply-link link-style3 creply" href="">Reply »</a>
</div>
<div class="comment-body">
<p>
MyComment</p>
</div>
</div>
</li>
<li style="list-style: none; display: none">
<div class="comment_form">
<form action="#" method="post">
<textarea class="span10" name="Comment" rows="6"></textarea>
<br>
<input class="btn btn-primary" type="submit" value="Reply">
</form>
</div>
</li>
You can check the modified demo, it's working with multiple comments too:
JsFiddle Demo

You need to query parents() and find the next .comment_form element.
<script type="text/javascript">
$(document).ready(function() {
$(".creply").click (function(e) {
e.preventDefault();
$(this).parents().next('.comment_form').toggle();
});
});
</script>

class selectors for jquery buttons not responsive

I'm incorporating jquery into an html file and have had some trouble getting a button to produce some action when I click on it. I've successfully managed to produce an alert for the event whereby I click on a div, but the button is a different matter.
<script type = "text/javascript">
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN PAGE HEADER-->
<div class="row">
<div class="col-md-12">
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
Verification & Validation Tools <small>statistics and more</small>
</h3>
<ul class="page-breadcrumb breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
Users
</li>
<li class="pull-right">
<div id="dashboard-report-range" class="dashboard-date-range tooltips" data-placement="top" data-original-title="Change overview date range">
<i class="fa fa-calendar"></i>
<span>
</span>
<i class="fa fa-angle-down"></i>
</div>
</li>
</ul>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<form class="form-horizontal" method="post" action="validateuser" >
<div class="validate">
<div class="form-group">
<label class="col-md-2 control-label">Email Address to Activate</label>
<div class="col-md-5"><input class="form-control" type="text" name="emailAddress"></input></div>
<button type="submit" class="btn-green"><i class="fa fa-check"></i> Validate</button>
</div>
</div>
</form>
</div>

I think the problem may be that the document it is not fully loaded when you add those event listeners. Try to use:
$(function() {
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});
Which is a shortcut for
$(document).ready(function() {
...
});

You're running the code before anything exists on the page
Use the jQuery ready wrapper https://api.jquery.com/ready/
<script>
$(function() {
// put your code here
})
</script>

wrap your javascript code inside . your code maybe attach event before
DOM load .
$(document).ready(function(){
// code here
});
or add your code at end of page

Wrap the script code inside document.ready function like:
$(document).ready(function(){
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});