How to write jquery toggle function for icon(which is generated from css) in angularjs?
I have a scenario,where I need to collapse the footer in mobile device,I tried with css media queries and jquery toggle function.But,I need to use angularjs.I tried it with using ng-show/ng-hide.But here,the '+' or '-' is getting from css.So, how I need to give click action for those signs.Click function must be given dynamically.
Script:
$( ".widget h2" ).click(
function() {
$(this).parent().toggleClass('active');
}
);
I need above code in angularjs.
Here is my Plunker
Thanks in Advance.
javascript angularjs
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
add a comment |
I have a scenario,where I need to collapse the footer in mobile device,I tried with css media queries and jquery toggle function.But,I need to use angularjs.I tried it with using ng-show/ng-hide.But here,the '+' or '-' is getting from css.So, how I need to give click action for those signs.Click function must be given dynamically.
Script:
$( ".widget h2" ).click(
function() {
$(this).parent().toggleClass('active');
}
);
I need above code in angularjs.
Here is my Plunker
Thanks in Advance.
javascript angularjs
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
add a comment |
I have a scenario,where I need to collapse the footer in mobile device,I tried with css media queries and jquery toggle function.But,I need to use angularjs.I tried it with using ng-show/ng-hide.But here,the '+' or '-' is getting from css.So, how I need to give click action for those signs.Click function must be given dynamically.
Script:
$( ".widget h2" ).click(
function() {
$(this).parent().toggleClass('active');
}
);
I need above code in angularjs.
Here is my Plunker
Thanks in Advance.
javascript angularjs
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
I have a scenario,where I need to collapse the footer in mobile device,I tried with css media queries and jquery toggle function.But,I need to use angularjs.I tried it with using ng-show/ng-hide.But here,the '+' or '-' is getting from css.So, how I need to give click action for those signs.Click function must be given dynamically.
Script:
$( ".widget h2" ).click(
function() {
$(this).parent().toggleClass('active');
}
);
I need above code in angularjs.
Here is my Plunker
Thanks in Advance.
javascript angularjs
javascript angularjs
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
asked Nov 20 '18 at 8:45
pbsbrpbsbr
1509
1509
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
You can use window.resize event
$(window).resize(function() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
});
Here is your updated plunkr
More improved version:
$(window).resize(function() {
CheckWindowWidth();
});
$('.widget h2').click(function() {
$(this)
.parent()
.toggleClass('active');
});
function CheckWindowWidth() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
}
CheckWindowWidth();
Edit:
As per angular version you can use this
In your html change
<div class="col-md-5 widget" ng-class="{'active': setSignInData }">
<h2 ng-click="setSignInData = !setSignInData">sign in data</h2>
<article class="widget_content">
<ul ng-class="autoScroll?'widget':'active widget'">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
In your controller
$scope.setSignInData = false;
This will change the scope variable and toggle active class
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
I need toggle function using ng-click.
– pbsbr
Nov 20 '18 at 8:52
@pbsbr please update your plunkr to support angularjs, and I have edited my answer with more precise solution.
– Just code
Nov 20 '18 at 8:54
I updated the plunker.Please check once.
– pbsbr
Nov 20 '18 at 9:10
@pbsbr I edited my answer please check
– Just code
Nov 20 '18 at 9:47
Sorry I need with angularjs(toggle function)
– pbsbr
Nov 20 '18 at 9:49
add a comment |
You could probably use ng-class to toggle css classes based on your conditions.
I would personally suggest to avoid using jquery in angularjs projects.
For ways on how you can use the ng-class,
you can go through the following blog
edited Nov 20 '18 at 9:59
Agilanbu
1
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389174%2fhow-to-write-jquery-toggle-function-for-iconwhich-is-generated-from-css-in-ang%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use window.resize event
$(window).resize(function() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
});
Here is your updated plunkr
More improved version:
$(window).resize(function() {
CheckWindowWidth();
});
$('.widget h2').click(function() {
$(this)
.parent()
.toggleClass('active');
});
function CheckWindowWidth() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
}
CheckWindowWidth();
Edit:
As per angular version you can use this
In your html change
<div class="col-md-5 widget" ng-class="{'active': setSignInData }">
<h2 ng-click="setSignInData = !setSignInData">sign in data</h2>
<article class="widget_content">
<ul ng-class="autoScroll?'widget':'active widget'">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
In your controller
$scope.setSignInData = false;
This will change the scope variable and toggle active class
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
I need toggle function using ng-click.
– pbsbr
Nov 20 '18 at 8:52
@pbsbr please update your plunkr to support angularjs, and I have edited my answer with more precise solution.
– Just code
Nov 20 '18 at 8:54
I updated the plunker.Please check once.
– pbsbr
Nov 20 '18 at 9:10
@pbsbr I edited my answer please check
– Just code
Nov 20 '18 at 9:47
Sorry I need with angularjs(toggle function)
– pbsbr
Nov 20 '18 at 9:49
add a comment |
You can use window.resize event
$(window).resize(function() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
});
Here is your updated plunkr
More improved version:
$(window).resize(function() {
CheckWindowWidth();
});
$('.widget h2').click(function() {
$(this)
.parent()
.toggleClass('active');
});
function CheckWindowWidth() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
}
CheckWindowWidth();
Edit:
As per angular version you can use this
In your html change
<div class="col-md-5 widget" ng-class="{'active': setSignInData }">
<h2 ng-click="setSignInData = !setSignInData">sign in data</h2>
<article class="widget_content">
<ul ng-class="autoScroll?'widget':'active widget'">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
In your controller
$scope.setSignInData = false;
This will change the scope variable and toggle active class
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
I need toggle function using ng-click.
– pbsbr
Nov 20 '18 at 8:52
@pbsbr please update your plunkr to support angularjs, and I have edited my answer with more precise solution.
– Just code
Nov 20 '18 at 8:54
I updated the plunker.Please check once.
– pbsbr
Nov 20 '18 at 9:10
@pbsbr I edited my answer please check
– Just code
Nov 20 '18 at 9:47
Sorry I need with angularjs(toggle function)
– pbsbr
Nov 20 '18 at 9:49
add a comment |
You can use window.resize event
$(window).resize(function() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
});
Here is your updated plunkr
More improved version:
$(window).resize(function() {
CheckWindowWidth();
});
$('.widget h2').click(function() {
$(this)
.parent()
.toggleClass('active');
});
function CheckWindowWidth() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
}
CheckWindowWidth();
Edit:
As per angular version you can use this
In your html change
<div class="col-md-5 widget" ng-class="{'active': setSignInData }">
<h2 ng-click="setSignInData = !setSignInData">sign in data</h2>
<article class="widget_content">
<ul ng-class="autoScroll?'widget':'active widget'">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
In your controller
$scope.setSignInData = false;
This will change the scope variable and toggle active class
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
You can use window.resize event
$(window).resize(function() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
});
Here is your updated plunkr
More improved version:
$(window).resize(function() {
CheckWindowWidth();
});
$('.widget h2').click(function() {
$(this)
.parent()
.toggleClass('active');
});
function CheckWindowWidth() {
$windowWidth = $(window).width();
if ($windowWidth <= 479) {
$('.widget').addClass('active');
}
}
CheckWindowWidth();
Edit:
As per angular version you can use this
In your html change
<div class="col-md-5 widget" ng-class="{'active': setSignInData }">
<h2 ng-click="setSignInData = !setSignInData">sign in data</h2>
<article class="widget_content">
<ul ng-class="autoScroll?'widget':'active widget'">
<li>Get a quote</li>
<li>Send quote</li>
</ul>
</article>
</div>
In your controller
$scope.setSignInData = false;
This will change the scope variable and toggle active class
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
edited Nov 20 '18 at 9:47
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
answered Nov 20 '18 at 8:49
Just codeJust code
10.4k53066
10.4k53066
I need toggle function using ng-click.
– pbsbr
Nov 20 '18 at 8:52
@pbsbr please update your plunkr to support angularjs, and I have edited my answer with more precise solution.
– Just code
Nov 20 '18 at 8:54
I updated the plunker.Please check once.
– pbsbr
Nov 20 '18 at 9:10
@pbsbr I edited my answer please check
– Just code
Nov 20 '18 at 9:47
Sorry I need with angularjs(toggle function)
– pbsbr
Nov 20 '18 at 9:49
add a comment |
I need toggle function using ng-click.
– pbsbr
Nov 20 '18 at 8:52
@pbsbr please update your plunkr to support angularjs, and I have edited my answer with more precise solution.
– Just code
Nov 20 '18 at 8:54
I updated the plunker.Please check once.
– pbsbr
Nov 20 '18 at 9:10
@pbsbr I edited my answer please check
– Just code
Nov 20 '18 at 9:47
Sorry I need with angularjs(toggle function)
– pbsbr
Nov 20 '18 at 9:49
I need toggle function using ng-click.
– pbsbr
Nov 20 '18 at 8:52
I need toggle function using ng-click.
– pbsbr
Nov 20 '18 at 8:52
@pbsbr please update your plunkr to support angularjs, and I have edited my answer with more precise solution.
– Just code
Nov 20 '18 at 8:54
@pbsbr please update your plunkr to support angularjs, and I have edited my answer with more precise solution.
– Just code
Nov 20 '18 at 8:54
I updated the plunker.Please check once.
– pbsbr
Nov 20 '18 at 9:10
I updated the plunker.Please check once.
– pbsbr
Nov 20 '18 at 9:10
@pbsbr I edited my answer please check
– Just code
Nov 20 '18 at 9:47
@pbsbr I edited my answer please check
– Just code
Nov 20 '18 at 9:47
Sorry I need with angularjs(toggle function)
– pbsbr
Nov 20 '18 at 9:49
Sorry I need with angularjs(toggle function)
– pbsbr
Nov 20 '18 at 9:49
add a comment |
You could probably use ng-class to toggle css classes based on your conditions.
I would personally suggest to avoid using jquery in angularjs projects.
For ways on how you can use the ng-class,
you can go through the following blog
edited Nov 20 '18 at 9:59
Agilanbu
1
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
add a comment |
You could probably use ng-class to toggle css classes based on your conditions.
I would personally suggest to avoid using jquery in angularjs projects.
For ways on how you can use the ng-class,
you can go through the following blog
edited Nov 20 '18 at 9:59
Agilanbu
1
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
add a comment |
You could probably use ng-class to toggle css classes based on your conditions.
I would personally suggest to avoid using jquery in angularjs projects.
For ways on how you can use the ng-class,
you can go through the following blog
edited Nov 20 '18 at 9:59
Agilanbu
1
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
You could probably use ng-class to toggle css classes based on your conditions.
I would personally suggest to avoid using jquery in angularjs projects.
For ways on how you can use the ng-class,
you can go through the following blog
edited Nov 20 '18 at 9:59
Agilanbu
1
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
edited Nov 20 '18 at 9:59
Agilanbu
1
edited Nov 20 '18 at 9:59
Agilanbu
1
edited Nov 20 '18 at 9:59
Agilanbu
1
1
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
answered Nov 20 '18 at 8:51
zaid warsizaid warsi
11
11
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389174%2fhow-to-write-jquery-toggle-function-for-iconwhich-is-generated-from-css-in-ang%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
