I have parent button with <i> tag element as a children, which is, if i click the button class they will be trigger the toggle class for both parent and child so it set the condition active and inactive button if i move one button to the other, the problem is my toggle class for child element is not working when i click the active button it self, the check icon won't disappear. here is my code jsfiddle
$(document).ready(function(){
$('.button').on("click", function() {
$('.price-filter-active').not(this).removeClass('price-filter-active');
$('.fa').removeClass('fa-check');
$(this).toggleClass('price-filter-active');
$(this).find("i").toggleClass('fa-check');
})
})
.price-filter-container {
width: 1190px;
max-width: 100%;
margin: 0 auto;
margin-top: 100px;
}
.price-filter-active {
background: #42B549;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
<div class="row-fluid">
<button class="span2 button">
1
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
2
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
3
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
4
<i class="fa" aria-hidden="true"></i>
</button>
</div>
</div>
$('.button').on("click", function() {
$('.price-filter-active').not(this).find('i').removeClass('fa-check');
$('.price-filter-active').not(this).removeClass('price-filter-active');
$(this).toggleClass('price-filter-active');
$(this).find("i").toggleClass('fa-check');
})
.price-filter-container {
width: 1190px;
max-width: 100%;
margin: 0 auto;
margin-top: 100px;
}
.price-filter-active {
background: #42B549;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
<div class="row-fluid">
<button class="span2 button">
1
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
2
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
3
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
4
<i class="fa" aria-hidden="true"></i>
</button>
</div>
</div>
It looks like you were missing including jQuery, which defines $. After including jQuery and fontawesome libraries to your fiddle, things seem to be working.
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
https://jsfiddle.net/hggk6348/3/
change this line $('.fa').removeClass('fa-check');
to
$('.price-filter-active').not(this).find("i").removeClass('fa-check');
$(document).ready(function(){
$('.button').on("click", function() {
$('.price-filter-active').not(this).removeClass('price-filter-active');
$('.price-filter-active').not(this).find("i").removeClass('fa-check');
$(this).toggleClass('price-filter-active');
$(this).find("i").toggleClass('fa-check');
})
})
.price-filter-container {
width: 1190px;
max-width: 100%;
margin: 0 auto;
margin-top: 100px;
}
.price-filter-active {
background: #42B549;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
<div class="row-fluid">
<button class="span2 button">
1
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
2
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
3
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
4
<i class="fa" aria-hidden="true"></i>
</button>
</div>
</div>
The problem is that you're not loading neither jQuery nor font-awesome in your fiddle, here is it working :
$('.button').on("click", function() {
$('.price-filter-active').not(this).removeClass('price-filter-active');
$('.fa').not($(this).find('.fa')).removeClass('fa-check');
$(this).toggleClass('price-filter-active');
$(this).find("i").toggleClass('fa-check');
})
.price-filter-container {
width: 1190px;
max-width: 100%;
margin: 0 auto;
margin-top: 100px;
}
.price-filter-active {
background: #42B549;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="price-filter-container">
<div class="row-fluid">
<button class="span2 button">
1
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
2
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
3
<i class="fa" aria-hidden="true"></i>
</button>
<button class="span2 button">
4
<i class="fa" aria-hidden="true"></i>
</button>
</div>
</div>
Related
When I click on one of the buttons with "arrow" class the whole nav is disappearing. (other than that, the jquery code is working well). But why it is happening? I want the whole nav to disappear when I click on the ".btn" again and not when I click on the button.arrow...
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
The issue is that the .arrow elements are nested within the .btn element, so a click on an arrow is also a click on the button.
To avoid this, you could stop the event that is triggered by arrows from propagating to the button.
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.arrow').click(function(event) {
event.stopPropagation();
// Do other work that should happen
// because an arrow got clicked
console.log("You clicked on an arrow element.");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
You want the .btn to toggle ONLY if the click event occured directly on the cog icon...
$('.btn').click(function(event) {
if($(event.target).is(".fa-cog")){
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
}
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
I could also be as simple as this:
$('.fa-cog').click(function() {
$('.sidebar').toggleClass("show");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
I have a very simple module to develop. On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none
myfunction() {
document.getElementById('Chatbot').style.visibility = "visible";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
<img src="sticky.png" style="width:50px;height:50px">
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
document.getElementById('Chatbot').style.display = "block";
function myfunction() {
document.getElementById('Chatbot').style.display = "block";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
Some Image
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name.
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this:
/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');
function showDiv(){
div.style.display = "block";
}
chat.addEventListener("click", showDiv);
/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}
<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
It can be a simple way
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css
<style>
.active {
display:block!important;
}
</style>
Your HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
Hello I am trying to make a toggle for multiple elements in jQuery but it not working the plus button when click does not slide toggle the element please help here is the link
HTML
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div id="post-info" class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->
CSS
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
jQuery
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).siblings(".post-info").slideToggle();
});
});
Totally wrong selector post-info is an id not a class, then post-info not siblings of post-btn11 but it's parent siblings, so the selector should like this:
$(".post-btn11").click(function(){
$(this).parent().siblings('#post-info').slideToggle();
});
But better use class because it should repeat and not unique. Also add this class to first one too.
$(".post-btn11").click(function(){
$(this).parent().siblings('.post-info').slideToggle();
});
JSFiddle
Here is the correction to your code. I have also updated your fiddle so go check it out. You had a problem with giving your post-info element an ID. In corrected version I simply add post-info as a class name. And also the .sublings() function will not work, since you applied it to your button element and it will not find any nested elements in it. So I needed to find a button's parent element first to get on the "same level" with your next post-info element and then simply use .next() function
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).parent(".col-xs-2").next(".post-info").slideToggle();
});
});
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-post end for post 3-->
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->
I am trying to figure out how to vertically stack two buttons (up and down) next to the input they influence. I want to do this with CSS and HTML.
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
As you can see I am using Font Awesome for the up and down chevrons. I am unsure as how to get the two buttons to stack. Once I do I will tie in the JS to control the text input value (already written).
An example of what I am working with can be found here: http://codepen.io/anon/pen/WvydgZ
I have plugged in jQuery, jQuery UI, and FontAwesome.
The desired affect is this:
Any ideas?
I think you should use a grid system if you can to accomplish tasks like this for you. In addition, try not to use <span> unless you want simple inline content. I did some tweaking trying to stay to your original as much as possible...
.row div{
float: left;
}
.input-row{
line-height: 30px;
height: 30px;
}
input{
height: 30px;
}
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.buttons{
width: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
<div class="input-row">
<div class="styled-value">
<div class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</div>
</div>
</div>
<div class="buttons">
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</div>
Try using a list as a wrapper for the buttons. An example building off of yours:
HTML
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size"/>
</span>
</span>
<ol class="no-style-list">
<li>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
</li>
<li>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</li>
</ol>
CSS
button {
background-color: #4f4f4f;
border-radius: 0;
color: white;
padding: 0 4px;
}
.no-style-list {
list-style-type: none;
padding-left:0;
display: inline-block;
}
http://codepen.io/anon/pen/KpeZOe
One option is place the input and buttons in a table. The buttons should have display:block. Like so
<table class='content'>
<tr>
<td>
<span class="styled-value">
<span class="multiplier-value-wrapper">
<input class="multiplier-value" type="text" value="4" name="family-size" />
</span>
</span>
</td>
<td>
<div class='button-wrapper'>
<button class="btn btn-small btn-up">
<i class="fa fa-chevron-up"></i>
</button>
<button class="btn btn-small btn-down">
<i class="fa fa-chevron-down"></i>
</button>
</div>
</td>
</tr>
</table>
demo
I am displaying a loop of items from a list in controller using ng-repeat directive. They are just the regular todo items with a minimize button. So, what I am doing to minimize the items is by setting up ng-hide to true on click of minimize button for those particular elements. Code is as below.
<div ng-repeat="note in notesList">
<div class="col-md-3 single-note" style="margin:5px" ng-hide="note.minimize">
<div class="note-title" style="margin-left: 30px">
<i class="fa fa-2x fa-paperclip" style="position:absolute; left:5px; top:5px"></i>
<b ng-bind="note.title"></b>
</div>
<div class="description" style="margin-left: 30px; text-align: justify" ng-bind="note.description"></div>
<div class="note-footer" style="margin-left: 30px; margin-bottom: 2px">
<span>
<img ng-src="{{ note.priority == 'imp' && 'img/imp.png' || ( note.priority == 'trivial' && 'img/trivial.png' || 'img/critical.png' )}}" /><!--<i class="fa fa-2x fa-dot-circle-o"></i>--></span>
<div class="pull-right">
<button class="btn btn-sm btn-default minimize" style="border-radius: 100%" ng-click="note.minimize=true"><i class="fa fa-minus"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" data-toggle='modal' data-target='#editNoteModal' ng-click="editNote(note.id)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" ng-click="removeNote(note.id)"><i class="fa fa-trash-o"></i></button>
</div>
</span>
</div>
</div>
</div>
Here is how it looks like
I have shown the list in right panel using another ng-repeat where I am just showing titles of notes and a button to maximize if they are hidden (constraint is I cannot have both left and right panels in single ng-repeat). Now the problem is whenever I click minimize button, that particular item hides, But I am now unable to display it again using maximize button in right panel.
I tried creating a function in controller for ng-click of minimize button which will return true if current state of item is 'not hidden' and I have passed a variable to the same function via ng-click of maximize button setting it up as false for ng-hide. But it's not working.
I am fed up now. If you guys got the purpose, please help me achieving the same. :(
Edit: Here is right panel code
<!--Right Panel (TAKEN FIRST AND PULLED TO RIGHT IN ORDER TO MAINTAIN UPPER POSITOIN IN MOBILE RESPONSIVENESS)-->
<div class="col-md-3 right-panel pull-right">
<div id="critical-notes-bunch">
<br/>
<div class="alert alert-danger"><i class="fa fa-dot-circle-o"></i> Critical Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-warning"><i class="fa fa-dot-circle-o"></i> Important Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-success"><i class="fa fa-dot-circle-o"></i> Trivial Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
</div>
<!--/Right Panel-->
In your right panel you interator is called miniNode, but in ng-click you reference mininode.minimize.
Changing either miniNode to mininode or vice versa should fix your problem.
In the ng-repeat that you use for rendering the right hand list; can you not simply do
<div ng-repeat="note in notesList">
<span ng-click="note.minimize = false">Maximize</span>
...
</div>