I used a free template for my app and with this template there is a button to "hide" list like this:
the little x button
And the executed code is the following one:
$(document).on('click', '.close-link', function () {
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
Now I'm trying to add a button to re-open this list but here comes the struggle I can't find a way to do that. I checked the documentation of JQuery remove() and there is not JQuery open()...
Do you guy have an idea ?
[EDIT] maybe the HTML would be great so :
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Machines</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li class="dropdwon">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu"></ul>
</li>
{{#if isNotHome}}<li><a class="backLocalHostDocker"><i class="fa fa-home"></i></a></li>{{/if}}
<li><a class="close-link" id="closeList"><i class="fa fa-close"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<ul class="container"></ul>
</div>
</div>
</div>
I just cleaned the code to just display the structure
In that case do not remove() which eliminates the element from DOM.
Just use
$BOX_PANEL.hide();
Then whenever you feel like showing it back, use
$BOX_PANEL.show();
Use jQuery detach()
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
jQuery detach()
You can use jQuery toggle() function to Show/Hide Tags
Example :
$(document).on('click', '.close-link', function () {
$('.x_panel').toggle();
});
Now, you can show/hide your .x_panel block by clicking .close-link
Here is the details about toggle() function.
Related
I am creating a meteor app that has a list of answers within a list-group. The user is to select an answer. I would like the clicked answer to highlight in yellow (which works in the template event below) and the previously clicked answers to return to the default background i.e. un-highlight (not working). I have tried various solutions none of which seem to work. Here is the latest:
template:
<template name="questItem">
<div class="quest">
<!--<div class="quest-content">-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{Question}}</h3>
</div>
<div class="panel-body">
<ul class="list-group" id="answer">
<li class="list-group-item" name="answer" id="A">A. {{A}}</li>
<li class="list-group-item" name="answer" id="B">B. {{B}}</li>
<li class="list-group-item" name="answer" id="C">C. {{C}}</li>
<li class="list-group-item" name="answer" id="D">D. {{D}}</li>
<li class="list-group-item" name="answer" id="E">E. {{E}}</li>
</ul>
<button type="button" name="submitAnswer" class="btn btn-default">Answer</button>
{{#if imagePresent}}
<p>There are images</p>
{{/if}}
{{> responseToAnswer}}
</div>
</div>
</div>
</template>
event helper:
Template.questItem.events({
'click #answer': function (e, tmpl){
var ans = e.target.id;
e.currentTarget.style.backgroundColor = " ";
e.target.style.backgroundColor = "yellow";
Session.set("selectedAnswer", ans);
Session.set("isSelected", !Session.get("isSelected"));
},
Any help will be greatly appreciated.Please note, this is in a template "questItem" so the "this" in my events helpers refers to "this" question item which includes all of the answers. I am not iterating over the answers unfortunately.
create a class 'list-group-clicked' with the yellow properties.
on click, loop through all elements and set class to list-group-item, except for the one just clicked (or set all to -item, then set one as -clicked)
Change an element's class with JavaScript
a deeper change would be to have the class come from your data or handlebar helper as well:
A. {{A}}
then have the event change your data. This used to be more necessary to avoid conflicts, but the rewrite of the template engine makes it a little less so.
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
I have a unordered list which needs the same functionality as the select tag. This works fine, but I want to reuse the dropdown list multiple times on every page and here things start to mess up as the selectors apply on all the lists and thus duplicate every behaviour and .clone(). I think I need to use the .closest() method to prevent the duplication but where and how to apply this?
Thanks
Working demo
Duplicate issue demo
jQuery code:
$(".cloned").text($(".selected").text());
$(".options").hide();
$(".cloned").click(function(){
$(".options").toggle();
e.preventDefault();
});
$('.select .options li').click(function(){
$(this).next.siblings().removeClass('selected');
$(this).next.addClass('selected');
$(".cloned").text($(".selected").text());
$(".options").hide();
});
html code:
<div class="select">
<span class="cloned"></span>
<ul class="options">
<li class="selected">Kensington</li>
<li>Lingfield</li>
<li>Wolverhampton</li>
<li>Cheltenham</li>
</ul>
</div>
<div class="select">
<span class="cloned"></span>
<ul class="options">
<li class="selected">Kensington</li>
<li>Lingfield</li>
<li>Wolverhampton</li>
<li>Cheltenham</li>
</ul>
</div>
$(".cloned").click(function () {
$(this).next(".options").toggle();
});
http://jsfiddle.net/6mukW/10
You also have some issues with the other part of the jQuery (select/deselect), but I'm not really sure what you're trying to do.
I am sliding content when the corresponding header is clicked using slidetoggle. Now I want to toggle between classes simultaneously.
I can use toggleclass and have all of the classes toggled irrespective of which one of the header is clicked, but I'm having trouble in toggling only the class corresponding to the headerclicked.
Here is my code:
<div class="Title ">
<a class="Expanded" href="#">Title1<span id="span1" class="ArrowDown"></span></a>
</div>
<ul class="Content">
<a href="#">
<li class="selected">hello1</li></a> <a href="#">
<li>hello2</li></a>
</ul>
<div class="Title">
<a class="Expanded" href="#">Title2<span id="span2" class="ArrowDown"></span> </a>
</div>
<ul class="Content">
<a href="#">
<li>hello3</li></a>
<a href="#">
<li>hij</li></a>
</ul>
Here is my script:
$(document).ready(function(){
$(".Title").click(function(){
$(this).next(".Content").slideToggle("slow");
$("#span1").toggleClass("ArrowUp", "ArrowDown");
});
});
I just put the id of the first span here, but I tried different things, but couldn't figure out what to do... I want the class of span toggled between ArrowUp and ArrowDown when the corresponding title is clicked (expanded or collapsed).
You can also use the power of jQuery chaining to write this in a single line like so.
$(this).find('span').toggleClass("ArrowUp", "ArrowDown").end()
.next(".Content").slideToggle("slow")
;
The two things to note in this are .find() (which gets the descendants of matched elements filtered by a selector) and .end() (which ends the most recent filtering operation in the current chain and returns the set of matched elements to its previous state.)
In the click callback function, make use of the this keyword, and combine it with the power of the .find() method.
example:
$('element').click(function() {
$(this).find('span').toggleClass('myclass');
});
$(this).find(' span').toggleClass("ArrowUp", "ArrowDown");
OK, perhaps the title doesnt best explain what im trying to achive but if I can explain better hopefully someone can help me out:
Im using the following code to select the text held within <a> and add it as the class of that element:
$(".nav a").each(function () {
var self = $(this);
self.addClass(self.text());
});
So for instance:
<a class="nav" href="page1.html">Google</a>
<a class="nav" href="page2.html">Yahoo</a>
<a class="nav" href="page3.html">Bing</a>
Becomes:
<a class="nav Google" href="page1.html">Google</a>
<a class="nav Yahoo" href="page2.html">Yahoo</a>
<a class="nav Bing" href="page3.html">Bing</a>
Im using another bit of code to find out which page the user is currently on, either Google, Yahoo or Bing, and I then allocate another class of 'Selected'
e.g If i was on the Google page the <a> class becomes:
<a class="nav Google selected" href="page1.html">Google</a>
I would like to extend this a little further and can probably explain best via an example:
<a class="nav Google selected" href="page1.html">Google</a>
<a class="nav Yahoo" href="page2.html">Yahoo</a>
<a class="nav Bing" href="page3.html">Bing</a>
<div class="container Google">
Lots of content
</div>
So as above, when 'Google' has the class 'selected' add that to <div class="container">, and the same for when the other links are clicked.
So in other words which ever <a> holds 'selected' add the previous class to <div class="container">
I know there are many ways to do this in far less 'hacky' ways but I have no other choice but to do it this way as I cannot edit the source of the page in anyway so it has to be a browser based solution rather than server side.
$('.nav').click(function(){
$(this).addClass($(this).text()); // I believe you already do this.
$('.conatiner').addClass($(this).text());
});
You can add the class to the container like this:
$('.conatiner').addClass($('a.selected').text());