We Keep Coding

Add css style to elements of 2 lists on element click

I have 2 lists of elements. When I click on an element of first list (it is a link), I basically need to add css class 'is-active' to that element AND to corresponding item from another list. I think they have to be in separate lists, as they are in two different bootstrap columns for mobile friendliness. I am currently styling elements from first list with:
$(document).ready(function(){
$('.tabs li').click(function(){
$(this).addClass('is-active');
$('.tabs li').not(this).removeClass('is-active');
});
})
Can't select elements from the other list though.. Any ideas how can I achieve this functionality with css, js/jquery?
My html structure currently is like this:
<div class="col-md-6">
<ul class="tabs">
<li class="tabs-title is-active">
title_1
</li>
<li class="tabs-title">
title_2
</li>
</ul>
</div>
<div class="col-md-6">
<div class="tabs-content">
<div class="tabs-panel is-active">
<div class="entry">
<p>content_1</p>
</div>
</div>
<div class="tabs-panel">
<div class="entry">
<p>content_2</p>
</div>
</div>
</div>
</div>
When I click on 2nd link from first column, the 2nd div from second column should get 'is-active' class. Is this possible?
I guess lists do not have corresponding elements right now. What do I need to have the items linked in some way?

Here's an example, since we don't know what your list looks like.
<ul class="tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="letters">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
Also, it's easier to remove all instances of the is-active class and then add it just to the target elements.
$(document).ready(function(){
$('.tabs li').click(function(){
var index = $('.tabs li').index(this);
$('.tabs li, .letters li').removeClass('is-active');
$(this).addClass('is-active');
$('.letters li').each(function(i) {
if (i == index)
$(this).addClass('is-active');
})
});
})
https://jsfiddle.net/fzeauw7a/

jQuery remove two element on var

var li = $('div.notification').parents("li");
var hr = li.next("hr");
li.remove();
hr.remove();
How to delete two elements in one time ? Like (li && hr).remove();
Thanks.

Just use add:
li.add(hr).remove()

$("li:has(div.notification), li:has(div.notification) + hr").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div class="notification">notification</div>
</li>
<hr>
<li>
<div class="notification">notification</div>
</li>
<hr>
<li>
<div class="not-notification">not notification</div>
</li>
<hr>
</ul>

Select item from list and send it back to server using Javascript AngularJS

I have a list of items. I want to select them by clicking. Selected item will be sent to server. At a time only one item can be selected. So, for this I need a variable where I can store the item. Please no jQuery. I am looking for simple Javascript AngularJS. Here is my html. After selecting one item, it will automatically go to another list, which I kept in ng-if=false. Suppose, I click on item1 then it will show the list of list1, list2 and list3. Now, let's select list2. Now item1 and list2 will both go to server.
<div ng-if="true"class="items">
<ul ng-if="true">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
<ul ng-if="false">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</div>
In my fiddle, if I select one date then it should list of dates, which is given ng-if='false'
fiddle link :- http://jsfiddle.net/abhijitloco/k6jso1u3/

Look
function AppController($scope) {
$scope.selectedItem = [];
$scope.clickItem = function(item) {
$scope.selectedItem.push(item);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="AppController">
{{selectedItem}}
<div class="items">
<ul ng-if="true">
<li ng-click="clickItem('Item1');">Item1</li>
<li ng-click="clickItem('Item2');">Item2</li>
<li ng-click="clickItem('Item3');">Item3</li>
</ul>
<ul ng-repeat="obj in selectedItem">
<li>{{obj}}</li>
</ul>
</div>
</div>

<div class="items">
<ul ng-if="!selectedItem" ng-model="selectedItem">
<li ng-click="selectedItem = item1">Item1</li>
<li ng-click="selectedItem = item2">Item2</li>
<li ng-click="selectedItem = item3">Item3</li>
</ul>
<ul ng-if="selectedItem" ng-model="selectedList">
<li ng-click="selectedList = list1">list1</li>
<li ng-click="selectedList = list2">list2</li>
<li ng-click="selectedList = list3">list3</li>
</ul>
</div>
You have selected item in selectedItem model and selected list in selectedList model.

Assuming that yours lists and items are dynamic I would propose something like the following:
constroller:
$scope.lists = [list1, list2, list2...]
$scope.items = [item1, item2, item3...]
$scope.selectItem = function(index){
$scope.selectedItem = $scope.items[index];
};
$scope.sentToServer = function(index){
$scope.lists[index].push($scope.selectedItem);
//send $scope.lists[index] and $scope.selectedItem;
};
view:
<div ng-if="true" class="items">
<ul ng-if="true">
<li ng-click="selectItem($index)" ng-repeat="item in items>{{item}</li>
</ul>
<ul ng-if="selectedItem">
<li ng-click="sendToServer($index)" ng-repeat="lists in lists>{{'list' + $index}</li>
</ul>
</div>

<div ng-if="true"class="items">
<ul ng-repeat='entry in list1'>
<li ng-click='clickMe(entry.name)'>{{entry.name}}</li>
</ul>
<ul ng-repeat='entry1 in list2' ng-if="secondList">
<li ng-click='sendToserver(entry1.name)'>{{entry1.name}}</li>
</ul>
</div>
contorller.js
$scope.optionsSelected = {};
$scope.clickMe = function(text){
$scope.optionsSelected['first'] = text;
$scope.secondList = true; // show second list
// you can initialize second list here OR reset values before it is sent to sever
}
$scope.sendToserver = function(text){
$scope.optionsSelected['second'] =text;
$scope.textSelected = $scope.optionsSelected;
// $scope.textSelected contains both options you just selected.
}

You can do this with couple of ngClick and ngIf directives. For example:
$scope.showType = 1;
$scope.selected = {};
$scope.selectDate = function(date) {
$scope.showType = 2;
$scope.selected.date = date;
};
$scope.selectTime = function(time) {
$scope.selected.time = time;
$http.post('date/selected', $scope.selected); // post wherever you need
};
where in HTML you would have
<ul class="datepicker text-center" ng-if="showType === 1">
<li ng-click="selectDate(date)" ng-repeat="date in dateValues">{{date | date:'EEE dd'}}</li>
</ul>
<ul class="datepicker text-center" ng-if="showType == 2">
<li ng-click="selectTime(time)" ng-repeat="time in timeValues">{{time}}</li>
</ul>
And here is your code updated:
Demo: http://plnkr.co/edit/SjxbyfboJlkLnOeDBhdn?p=preview

How can I get the class of a parent element?

I would like to find the class of the parent element of the child with .current.
var currentli = $('.nav').find('a.current').parent().attr('class');
console.log(currentli);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>
but it always throws me undefined
NOTE: I don't know which a currently has .current which is why I have to use the .find() method.

Your code should already work, but it might be more reliable to access the property className instead:
jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>

This will work:
var currentli = $($('.nav').find('a.current')).parent().attr('class');
console.log(currentli);
I'm simply transforming the found collection into a jQuery object again.
See fiddle: http://jsfiddle.net/RaphaelDDL/wnW4u/
Ps.: If more than one a has class="current", only the first one will be retrieved.

jQuery(function($) {
console.log($('.nav a.current').parent().prop('className'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="nav">
<ul>
<li class="tab1">
Welcome
</li>
<li class="tab2">
About
</li>
<!-- and some lists more -->
</ul>
</div>

show/hide text relevant to a class based on click using jquery

I'm having a list of products displayed. Once the show more is clicked the text within the extras class needs to be displayed, the show more needs to be hidden and show less needs to be visible. The opposite needs to happen when show less is clicked.
I used the below jQuery code and it works but the problem is that it shows/hide add the extra text in every block. I want it to show only the relevant block.
Javascript
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
$(".extras").toggle();
$('.showmore').hide();
$('.less').show();
});
$('.less').click(function() {
$(".extras").toggle();
$('.extras').hide();
$('.showmore').show()
});
});
HTML
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
Any help will be appreciated.

Make sure you do your logic in relevant sections. Demo Here
Try:
$(document).ready(function () {
$('.extras').css("display","none");
$('.showmore').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.less').show();
$(this).hide();
});
$('.less').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.showmore').show();
$(this).hide();
});
});

Use .closest()
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find('.showmore').hide();
$div.find('.less').show();
});
$('.less').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find(".extras").hide();
$div.find('.showmore').show();
});
});​
Check Fiddle

try using $(this).toggle() in the event handler.
Or I guess more completely, $('.extras').hide(); $(this).show();

Use the $(this) to get the relevant content,
so inside the $(".showmore").click(),
$(this).parents(".blocks").children(".extras").toggle();
$(this).parents(".blocks").children('.showmore').hide();
$(this).parents(".blocks").children('.less').show();
Test Link

You can combine closest, find and toggle to work.
So all your javascript can be changed to the following.
$('.showmore, .less').click(function() {
var $elements = $(this).closest('.blocks').find('.extras, .showmore');
$elements.toggle();
});
demo
References
Closest
Find
Toggle