We Keep Coding

Applying style to separate element based on clicked button

I have a little JS/Jquery issue with my portfolio website and I still consider myself a mediocre programmer.
I have five buttons on my portfolio website, each representing one of my projects. I also have a div with five matching text contents (as a description for each of the projects) and an image/link as a visual description of the project with link on the image so the user can go to the project URL.
<div class="work-content">
<h2 class="con-active" id="contentOne">Content One</h2>
<h2 class="con-hidden" id="contentTwo">Content Two</h2>
<h2 class="con-hidden" id="contentThree">Content Three</h2>
<h2 class="con-hidden" id="contentFour">Content Four</h2>
<h2 class="con-hidden" id="contentFive">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
<a href="about.html" class="popup" id="popupOne">
<div class="popup-content">Background One</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupTwo">
<div class="popup-content">Background Two</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupThree">
<div class="popup-content">Background Three</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFour">
<div class="popup-content">Background Four</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFive">
<div class="popup-content">Background Five</div>
</a>
</div>
<ul class="work-ul">
<li class="work-link"><button class="button" id="workOne">WORK</button></li>
<li class="work-link"><button class="button" id="workTwo">WORK</button></li>
<li class="work-link"><button class="button" id="workThree">WORK</button></li>
<li class="work-link"><button class="button" id="workFour">WORK</button></li>
<li class="work-link"><button class="button" id="workFive">WORK</button></li>
</ul>
The idea is: when a user enters the page, it will be showing the first project (meaning the first description and first image with the link will be active and showing - probably having class "is-active"). When the user clicks any of the buttons, it will hide the description and image that's being shown already and show the one matching the project button (So if I click the third button, it will hide the first description and first image and show the third description and third image)
I am not really good with arrays and Each functions, plus I am baffled by how to remove the "is-active" class form all non-desired elements and then add that class to the elements I want to show.
NOTE: If you would use a different HTML markup, it's more than welcome. This is just first iteration and I have been stuck on this for past day.

Using your current setup, you could try something like this:
$(document).ready(function() {
$('.work-ul button').each(function(i) {
$(this).click(function(o) {
$('.work-content h2, div.moving-zone a').hide();
$('.work-content h2:eq('+i+'), div.moving-zone a:eq('+i+')').show();
});
});
});
You'll want some initial styles/class to hide all but perhaps your first portfolio item.

I like to use the data-* attributes for this situation.
Give the button a data-id attribute.
Give the corresponding elements (header and anchor) a data-content attribute with the same value as above.
Then on the click of the button, first hide all the elements with a data-content attribute, the show the ones which data-content attribute corresponds with the data-id attribute.
So might be able to lose some id attributes, but that you should judge yourself.
$(function() {
$('.button').on('click', function() {
var id = $(this).data('id');
$('[data-content]').hide();
$('[data-content="'+id+'"]').show();
});
});
.con-hidden,
.is-hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-content">
<h2 class="con-active" id="contentOne" data-content="1">Content One</h2>
<h2 class="con-hidden" id="contentTwo" data-content="2">Content Two</h2>
<h2 class="con-hidden" id="contentThree" data-content="3">Content Three</h2>
<h2 class="con-hidden" id="contentFour" data-content="4">Content Four</h2>
<h2 class="con-hidden" id="contentFive" data-content="5">Content Five</h2>
</div>
<div class="moving-zone" style="z-index: 0;">
<a href="about.html" class="popup" id="popupOne" data-content="1">
<div class="popup-content">Background One</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupTwo" data-content="2">
<div class="popup-content">Background Two</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupThree" data-content="3">
<div class="popup-content">Background Three</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFour" data-content="4">
<div class="popup-content">Background Four</div>
</a>
<a href="about.html" class="popup is-hidden" id="popupFive" data-content="5">
<div class="popup-content">Background Five</div>
</a>
</div>
<ul class="work-ul">
<li class="work-link"><button class="button" id="workOne" data-id="1">WORK</button></li>
<li class="work-link"><button class="button" id="workTwo" data-id="2">WORK</button></li>
<li class="work-link"><button class="button" id="workThree" data-id="3">WORK</button></li>
<li class="work-link"><button class="button" id="workFour" data-id="4">WORK</button></li>
<li class="work-link"><button class="button" id="workFive" data-id="5">WORK</button></li>
</ul>

Handlebar content dynamic

I have the code below that should display the chat window when I click on the user name in <li>
Code <ul> which contains the User list and received the click
<ul class="chat-contacts">
<li class="online" data-user-id="USERCODE">
<a href="#">
<div class="media">
<div class="media-body">
<div class="contact-name">USERNAME</div>
</div>
</div>
</a>
</li>
</ul>
This is the chat window code. If I put a static content of the <ul> window appears, however when I feed the the <ul> with content dynamic the click does not work. Can someone help me??
<script id="chat-window-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
</div>
<div class="panel-body" id="chat-bill">
</div>
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" />
</form>
</div>
</script>

Your click event is not working. The event doesn't know the element exists.
This can happen when using jQuery('.chat-contacts li').click(function(){// do something})
I would try setting the click event with this:
jQuery(document).on('click', '.chat-contacts li', function(){
});
Setting the event with on will force jQuery to scan for new elements in the list.

Radio Button Bootstrap Panel not working

http://jsfiddle.net/um7m89hp/10/
<div class="piGal pull-right">
Some image or <br />
images will go <br />
over here.
</div>
<div class="panel-group pull-left" id="products">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #1<br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber1" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
<div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2">
<h4 class="panel-title">
<div>
<input type="radio" name="specs">
Some Product Title #2 <br />
Some Product Subtitle
</div>
</h4>
</div>
<div id="partnumber2" class="panel-collapse collapse">
<div class="list-group">
<ul class="list-group">
<li class="list-group-item">Some product data</li>
<li class="list-group-item">Some product data</li>
</ul>
</div>
</div>
</div>
</div>
The radio button checks only when the text in the panel is clicked. If you click directly on the radio button itself or in the border space it will activate the panel but not check the radio button. Any help on this issue? I'm trying to keep the formatting with the radio button out to the side of the panel text.

Yes, strange behaviour. Something with the BS css on the accordion is my guess. All you need to do is change the trigger for the checking of the radio. I have it on the shown event of the collapse.
$(".panel-collapse").on("shown.bs.collapse", function(event) {
//travel up the DOM to the heading and check the radio
$(this).prev('.panel-heading').find('input').prop("checked", true);
});
here is the fiddle: http://jsfiddle.net/um7m89hp/16/

Manage complex select/deselect artis/album/song

First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks

page navigation not working

I'm very new to phonegap and have had to pick up someone else's code. I am having an issue with page navigation. I have an onClick event on a list item and depending on a boolean, I want to navigate to a specific page.
The two possible pages the user will move to are almost identical. There is only one div which is different containing a list view. Originally I had only one page and I loaded the html of the div dynamically with javascript but the css was not being applied to so I decided to create an additional page which was almost identical apart from the one div mentioned above.
My issue now is that whichever div(page) I create first in my index.html will work for navigation but the second one will not i.e.
if I define the divs in the following order:
<div id="page1" data-role="page"></div>
<div id="page2" data-role="page"></div>
then navigating to page1 will work and navigating to page 2 will not. But if I switch the order in which I place the divs in the index.html page i.e.
<div id="page2" data-role="page"></div>
<div id="page1" data-role="page"></div>
then navigating to page 2 will work and navigating to page 1 will not.
Hope this made sense. Here is my code:
In the head tag I have the following function:
function SetMyAccountsBool(bool){
MyAccountsBool=bool;
if (CheckBool){
alert('here');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans4");
//window.location = "file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans3";
//$("#MyAccTrans3").trigger("pagecreate");
}
else{
alert('here2');
//$.mobile.changePage('#MyAccTrans');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans");
}
};
Then on a listview, I am calling the above function as an onClick event. It is entering the function, as I am getting the alert either 'here' or 'here2' depending on a boolean.
And finally here are the two almost identical divs I have:
<div id="MyAccTrans" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div" style="padding:10px">
<ul id="MyAccTrans_ul" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Savings - 173</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<img src="../images/homeGrey50.png">
<img src="../images/EuroGrey50.png">
<img src="../images/CalculatorGrey50.png">
</div>
</div>
AND
<div id="MyAccTrans4" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER4"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL4"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div4" style="padding:10px">
<ul id="MyAccTrans_ul4" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Current - 004</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<img src="../images/homeGrey50.png">
<img src="../images/EuroGrey50.png">
<img src="../images/CalculatorGrey50.png">
</div>
</div>
Any help appreciated