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

Onclick my 'button' opens all buttons of the same type

So this is what I have right now
http://jsfiddle.net/Wpn94/1755/
The first part of the javascript is just calling in the jQuery lib. Since I don't have acces to the original files I use a custom css, js plugin (mind this all in done in wordpress).
In the fiddle if you click on one the the 'meer' it only opens the one you've clicked. If you press 'minder'it nicely closes the one you've clicked.
Now to the issue, on my testing area if I click one of these buttons the other 5 open as well, which ofcource is not the intended use.
Is there any solution which could fix this? I'mn not able to link to the testing enviroment since it's about a product which isn't released yet, so sadly I do not have permissions to do so.
Possibly the issue:
$('.wrapper').find('a[href="#"]').on('click', function (e) {
or
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
I think the issue is in one of those two. Since I look for the wrapper class which all the 'buttons'have in common.
Any help would be greatly appreciated.
(structure of the element on the test area)
<div class="column withimage ">
<div class="column-inner">
<div class="image" style="background-image: url(http://eperium.com.testbyte.nl/wp-content/uploads/2016/08/Icoon_orientatie_v02.png)"></div>
<div class="txtwrap"><h4><center>ORIËNTATIE</center></h4>
<div class="wrapper">
<div class="small">
<p style="text-align: center;">
<span style="color: #000000; font-size: 16pt;">title</span><br>
<span style="color: #000000; font-size: 12pt;">text<br>more text week. </span></p>
</div>
<p style="text-align: center;"><a class="btn" href="#">Meer informatie</a></p>
</div>

What are you doing inside this function ?
$('.wrapper').find('a[href="#"]').on('click', function (e) {
You need to toogle your class on $(this) element, not to select all element with jquery again.

As closest doesn't seem to be reliable (maybe only in your test area) it is worth a try to navigate to the desired element with .parent()
$(this).parent().parent().find('.small, .big').toggleClass('small big');
If anyone is interested in the differences:
Difference between jQuery parent(), parents() and closest() functions.
According to this, closest should actually work but parent seems to be the saver way.

You can use Jquery's findByClass.
$('.className')
This will find all the elements use className.

Set focus to next id

To improve my jquery skills I am working on an online crossword type game.
I will insert an id, such as d-1 for down 1 or a-5 for across 5 in the appropriate square.
I would like to use jquery to set the focus to the next appropriate square after the user types in a letter; for example if they type in foo, starting at the top right, the word FOO would appear going down the right column.
I have spent a long time to accomplish this with no success.
Below is some sample code with the id hardcoded (though finding the next across id would probably be different than the next down id)
Thanks for any help.
Jsfiddle
HTML
<div class="live-cw-css-table-tr">
<div class="live-cw-css-table-td" id="a-1"contenteditable></div>
<div class="live-cw-css-table-td" id="a-1" contenteditable></div>
<div class="live-cw-css-table-td contenteditable" id="d-1 a-1" contenteditable></div>
</div>
<div class="live-cw-css-table-tr">
<div class="live-cw-css-table-td live-cw-css-nb"></div>
<div class="live-cw-css-table-td live-cw-css-nb" id="d-1" contenteditable></div>
<div class="live-cw-css-table-td " id="d-1" contenteditable></div>
</div>
</div>
jquery
$('.live-cw-css-table-td').on('input',function(e){
if ($(this).text().length > 1) {
$(this).next().find('#d-1').focus();
}
});

How do I insert a ahref around my mouseover divs - wordpress keeps removing the ahref

on the following site: http://www.strategix.co.za/ on that page you will see the heading OUR SOLUTIONS with the 8 hover over boxes.
what I'm trying to do is to wrap a href around each box so that not only when you hover over does it display the right side div but you can click on the box which takes you to the relevant page.
so in the code:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
I try say:
<div class="left2">
<div class="box2">Microsoft Dynamics ERP</div>
</div>
But the minute I save it in wordpress it removes the ahref. I also tried this:
<div class="left2">
<div class="box2"><div>Microsoft Dynamics ERP</div></div>
</div>
But that didnt save either. I just need each seperate whole box to have an href.
Will appreciate some help.
Thanks.

Try
<div class="left2">
<div class="box2" onclick="javascript:window.location.href='link';">Microsoft Dynamics ERP</div>
</div>
Using javascript is one way to apply a link to an entire div.

jQuery: get a reference to a specific element without using id

I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!

Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.

You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});