We Keep Coding

Question about these filter or dropdown menus

The problems: (dont mind the upper section)
When I click a checkbox the result of the other checkbox also display and it also seems to be adding a margin at the bottom because the popup is moving down.
Second I cant seem to find a way find a way to display the 2 sections side by side.
Is there a way that I could make it that only one checkbox per section can be selected? And if the use changes their mind and click a different checkbox it will also change the displayed result.
heres the codepen link:
https://codepen.io/racrdvz/pen/RwWZrog
<div class="pickerSection">
<section>
<div class="watchingFor">
<p class="type">Watching for:</p>
<div class="menuToggle">
<div class="menuToggleBtn"><img src="https://i.imgur.com/Id2MrBQ.png" alt="" id="watchfor-btn" class="menuBtn"> </div>
<div class="menuToggleBtn">
<span class='display beginner'>30 days</span>
<span class='display intermediate'>60 days</span>
<span class='display advanced'>90 days</span>
</div>
</div>
</div>
</div>
</section>
heres the look im going for:
Forgive me for the multiple questions, any help and suggestion will be much appriciated. Thanks

the solution to point 1 - use the different name of id and class for checkboxes
the solution to point 2 - USe row and col classes to get them in the same row

jQuery .val()/.text() not working for a specific block of html

I am using HandlebarsJS with Yii and PHP to render a page. Below is a block of html/handlebars code from the page
{{#if embed_link}}
<p class='f_hidden_p'>
<a href='{{embed_link}}'>
{{embed_link}}
</a>
</p>
<div class = 'link-wrapper'>
<div class = 'link-container'>
<a class = 'link-anchor-box'>
<div class = 'link-pic-wrap'>
<div class='playable_wrap'>
<div class='play_btn'></div>
<div class = 'link-img'></div>
</div>
<div class = 'link-text-data'>
<div class = 'link-text-title'>
<span class = 'link-text-website'></span>
</div>
<div class = 'link-text-about'></div>
</div>
</div>
</a>
</div>
</div>
{{/if}}
The above code only runs when embed_link is true. In my test case it is, and when it runs I need to use jQuery to get the text from "f_hidden_p" . So in the js file I have,
$(document).ready(function(){
console.log($('.f_hidden_p').text());
console.log($('.f_hidden_p').val());
});
For some reason this returns an empty string or undefined. When I inspect element and check, I can see that the value of {{embed_link}} has a value that is not an empty string.
After that I tried, giving the anchor tag an unique id "embed_link" and tried.
$(document).ready(function(){
console.log($('#embed_link').text());
console.log($('#embed_link').val());
});
But that didn't work either. I tried that same syntax with different divs in the HTML that are also within a handlebars block and it worked perfectly. It just doesn't work for this block for some reason.
NOTE : .f_hidden_p is hidden -> it's display is 'none' in CSS. But I am quite sure that shouldn't stop .text() or .val() from getting the text.
Thanks for the help!

I'm adding this for better formatting ...
Did you try this?
$(document).ready(function(){
setTimeout(function() {
console.log($('.f_hidden_p').text());
console.log($('.f_hidden_p').val());
}, 2000);
});
... with no results?

Javascript toggle using custom attributes

Can't seem to get this to work for me, can anyone offer me some help?
http://codepen.io/anon/pen/kABjC
This should open and close a section of text based on click, it takes the ID # which is just a digit (1,2,3,4,etc) and using that id targets an id to open and close the section.
Javascript
$(document).ready(function(){
$('.classclick').click(function(){
$('#class'+$(this).Attr('data-id')+"show").show(400);
});
});
HTML
<div class="classes">
<?php foreach ($classes as $class): ?>
<div class="class">
<div class="classclick" data-id="<?=$class['cid']?>">
<div class="class-title">
<?=$class['className']?>
</div>
<div class="class-intensity">
Intensity: <?=$class['classIntensity']?>
</div>
</div>
<div class="class-show hidden" id="class<?=$class['cid']?>show">
<div class="class-inner-content">
<div class="two-thirds">
<?=$class['classDesc']?> </div>
<div class="one-third">
Things To Know:
asdfasd
asdf
afsdadfs
fsda
dfsa
dfsadfsa
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>

as Patrick suggested, You might have missed the jQuery inclusion in CodePen, but i would suggest using $.each when using a class selector. Updated CodePen
$('.classclick').each(function(){
$(this).click(function(){
$('#class'+$(this).data('id')+"show").toggle(400);
});
});

Demo - The .hidden element is next in the dom, try using next() to select .hidden and toggling it.
$('.classclick').click(function(){
$(this).next(".hidden").toggle(400);
});
This avoids string concatenation, each loops & extra selectors while making it more readable for you.

class swapping with angular

I am opening and closing some side (open and close under the title) using angular and I'm wondering if there is a way I can swap between classes When I'm doing this too so I can swap some css. Here's what I'm doing -
<form name="metaDeta" id="lessonDetails" class="lessonItem" ng-controller="detailsController">
<div class="small-12 columns">
<div class="lesonHead lessonHeadOpen saDetailsHead" ng-click="showDetails = ! showDetails" ng-class="myVar">
<h5>Lesson Details</h5>
</div>
<div class="lessonSASlider" ng-show="showDetails">
This works fine for opening and closing the form, however there is a class .lessonHeadOpen that I would like to try and toggle between .lessonHeadClosed. So basically I am looking for something like an addClass/removeClass even on click to toggle between the 2 classes on the element when the user opens and closes it. Is this possible with angular? Could I work off what I have or do I have to re-structure. Thanks!

You can use ng-class to dynamically add classes based on the result of expressions. Read ngClass
<div class="lessonHead" ng-click="showDetails = ! showDetails">
<h5>Lesson Details</h5>
</div>
<div ng-class="{className: showDetails}">
</div>
This directive will evaluate showDetails expression and if true, it will apply the class className
Update:
If I understand correctly, do the same but reverse the expression so if not showdetails add one class and then when show details is true it will be removed and the other class added. <div ng-class="{classOne: showDetails , classTwo: !showDetails}"> SEE FIDDLE

You can use ng-class for toggling.
Simply add a condition for a class to appear and it will based on the condition.
ng-class="{'className': shouldShowClass}"

You can use ng-class's ternary operator notation:
<div ng-class="showDetails? 'lessonHeadOpen': 'lessonHeadClosed'>...</div>
SAMPLE DEMO

ng-if inside ng-repeat not working as expected

I have a repeater that I'm using to return views into an accordion. I'd like to conditionally load the views, so I'm wanting to add an ng-if condition on the repeaters elements to check and see if current == true but it's not working. I'm using Angular 1.0.8.
I have a fiddle
<div data-ng-view></div> is showing all the same view
Edit:
Angular 1.0.8 does not support ng-if so I went with the switch statement.
<div ng-switch="group.current">
<div ng-switch-when="true">
<div data-ng-view></div>
</div>
</div>

Problem was at
<div ng-if="group.current == 'true'"><div data-ng-view></div></div>
replaced with
<div ng-if="group.current === true"><div data-ng-view></div></div>
check updated at http://jsfiddle.net/rajumjib/GUwSh/15/