We Keep Coding

How can I show div if keyword match

If searched keyword matches I am able to show the matched input text and its related div with category name. Now what I am trying is to search over category names as well.
If searched keyword matches with the category name this div should visible. also if searched keyword matches with the input names this is also visible with its category name.
$('.bar-input').on('keyup', function() {
var search_input = $(this).val().toLowerCase();
var tags = $('.wrap label');
var count = tags.length;
var text_input = $(this).val().length;
var category = $('.category-type');
// // searching for tags
for (i = 0; i < count; i++) {
if (!search_input || tags[i].textContent.toLowerCase().indexOf(search_input) > -1) {
tags[i].parentNode.style['display'] = 'block';
} else {
tags[i].parentNode.style['display'] = 'none';
}
}
// If no tags found category will be hidden
$(".category").not(".stcw-screen").map(function() {
let flag = true;
$(this).find('.wrap').map(function() {
if ($(this).css("display") != "none") {
flag = false;
}
});
if (flag) {
$(this).css("display", "none");
} else {
$(this).css("display", "block");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="bar-input" type="text" placeholder="search">
<div class="category">
<div class="category-name">
<h5>Country</h5>
</div>
<div class="options">
<div class="wrap">
<label><input type="checkbox">America</label>
</div><div class="wrap">
<label><input type="checkbox">France</label>
</div>
</div>
</div>
<div class="category">
<div class="category-type">
<h5>Sports</h5>
</div>
<div class="options">
<div class="wrap">
<label><input type="checkbox">Football</label>
</div><div class="wrap">
<label><input type="checkbox">Cricket</label>
</div>
</div>
</div>
<div class="category">
<div class="category-type">
<h5>Operating system </h5>
</div>
<div class="options">
<div class="wrap">
<label><input type="checkbox">linux</label>
</div><div class="wrap">
<label><input type="checkbox">windows</label>
</div>
</div>
</div>

To do what you require you can loop through each category and first determine if the .category-type matches the search term using a case-insensitive implementation of :contains and then display that section with all options visible, or if not you can look at each option in turn using the same :icontains() selector and show them individually.
The logic would look something like this:
// case-insensitive :contains implementation (credit: https://stackoverflow.com/a/8747204/519413)
jQuery.expr[':'].icontains = (a, i, m) => $(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
var $categories = $('.category');
var $types = $('.category-type');
$('.bar-input').on('input', function() {
var search_input = $(this).val().toLowerCase().trim();
if (search_input.length == 0) {
// no search term entered, reset state to show all items
$('.wrap label').add($types).show()
return;
}
$categories.each((i, category) => {
let $cat = $(category);
let $type = $cat.find('.category-type').hide();
let $labels = $cat.find('.wrap label').hide();
if ($type.is(`:icontains("${search_input}")`)) {
// match on category type, show category-type and all child options
$type.add($labels).show();
} else {
// no match on category, show only if match on child option
let $matches = $labels.filter(`:icontains("${search_input}")`).show();
$type.toggle($matches.length > 0);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="bar-input" type="text" placeholder="search">
<div class="category">
<div class="category-type">
<h5>Country</h5>
</div>
<div class="options">
<div class="wrap">
<label><input type="checkbox">America</label>
</div>
<div class="wrap">
<label><input type="checkbox">France</label>
</div>
</div>
</div>
<div class="category">
<div class="category-type">
<h5>Sports</h5>
</div>
<div class="options">
<div class="wrap">
<label><input type="checkbox">Football</label>
</div>
<div class="wrap">
<label><input type="checkbox">Cricket</label>
</div>
</div>
</div>
<div class="category">
<div class="category-type">
<h5>Operating system </h5>
</div>
<div class="options">
<div class="wrap">
<label><input type="checkbox">linux</label>
</div>
<div class="wrap">
<label><input type="checkbox">windows</label>
</div>
</div>
</div>

Get Specific Div Content Based On Id

I am trying to get specific div content based on id. As an example, I've the following contents one by one in the front-end using div:
Question 1
User clicks next, then the second question within the div and so on will come up. When there will be no questions left and user clicks next again, it'll show the question numbers as follows: Say for three questions at the end, a similar list will appear in the front-end
Question 1 Question 2 Question 3
When user will click in any of the question, it should take the user to that specific question. Notice that, this isn't an anchor and it has to be done using the div section. Here's a fiddle that I was trying to work with - JS Fiddle
In the code, I've a div area that remains hidden initially, specifically the question numbers that'll appear at the end. So it reaches the last question, it enables that div area and shows the question number. Here is the code snippet:
$(".getVal").click(function () {
var $container = $('.divs').children().eq();
var id = $(".h2Val").text().trim();
var id2 = $(this).attr("data-id"); //Assigned data-id to match the question id
if (id.match(id2)) { //When match found, trying to enable the div with question
$(".hideSection1").show();
$(".hideSection2").hide();
}
});
Now the problem I face, is it actually possible to get that specific div with question as this isn't an anchor or href or any better way to overcome this issue? In my case, it shows the question but the last one but required to obtain corresponding questions clicking on question numerbers.
Code Snippet:
$(document).ready(function() {
$(".hideSection2").hide();
divs = $(".divs").children();
divs.each(function(e) {
if (e != 0)
$(this).hide();
});
var index = 0,
divs = $(".divs").children();
//declare
var indexes = 0;
$(".button").click(function() {
//get div length
var lengths = divs.length;
//checking if btn clicked is next
if ($(this).is('#next')) {
//checking if value if less then length
if ((indexes < (lengths - 1))) {
//increment
//remove
$(this).prop('disabled', false);
$(this).css("background-color", "blue");
console.log("in - " + indexes)
//show div
index = (index + 1) % divs.length;
divs.eq(index).show().siblings().hide();
//to show result
show_data1(indexes);
indexes++;
} else {
$(".hideSection2").show();
$(".hideSection1").hide();
console.log("i am in last question reached")
$(this).prop('disabled', true); //disable
$(this).css("background-color", "#00FFFF"); //chnagecolor
$("#prev").css("background-color", "blue");
}
} else if ($(this).is('#prev')) {
//chcking id value is not 0
if (indexes != 0) {
//remove
$(this).prop('disabled', false);
$(this).css("background-color", "blue");
indexes--;
//show
index = (index - 1) % divs.length;
divs.eq(index).show().siblings().hide();
console.log("back - " + indexes)
show_data1(indexes); //show result
} else {
console.log("no back question")
//disabled
$(this).prop('disabled', true);
//add color chnage
$(this).css("background-color", "#00FFFF");
$("#next").css("background-color", "blue");
}
}
});
function show_data1(indexes1) {
//pass indexes value to get required div
var $container = $('.divs').children().eq(indexes1);
var id = $container.find(".h2Val").text().trim();
var $checked = $container.find('.cbCheck:checked');
var values = $checked.map(function() {
return this.value
}).get();
//console.clear()
console.log('ID: ' + id + ' has ' + $checked.length + ' checked');
console.log('Values: ', values.join())
}
$(".getVal").click(function() {
var $container = $('.divs').children().eq();
var id = $(".h2Val").text().trim();
var id2 = $(this).attr("data-id");
//alert($(this).attr("data-id"));
if (id.match(id2)) {
//alert(id + $(this).attr("data-id"));
$(".hideSection1").show();
$(".hideSection2").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="hideSection1">
<div class="divs">
<div class="heading">
<div class="h2Val">1</div>
<div>What's the capital of England?</div>
<div class="heading2">
<div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
</div>
</div>
<div class="heading">
<div class="h2Val">2</div>
<div>Who invented computer?</div>
<div class="heading2">
<div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
</div>
</div>
<div class="heading">
<div class="h2Val">3</div>
<div>Who invented computehttr?</div>
<div class="heading2">
<div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
</div>
<div class="heading2">
<div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
</div>
</div>
</div>
<a class="button" id="prev">Previous</a>
<a class="button" id="next">Next</a>
</div>
<div class="hideSection2">
<div class="container">
<div class="row">
<div class="divs2">
<a class="getVal" data-id="1">1</a>
<a class="getVal" data-id="2">2</a>
<a class="getVal" data-id="3">3</a>
</div>
</div>
</div>
</div>

You don't need to compare if (id.match(id2)) { because your questions are shown in sequence so we can use divs.eq(id).. to show only div which is clicked by user and to show answer we can pass this id value to show_data1(indexes1) to show answer as well when question is clicked.Also , i have subtract one from the id value because div index will start from 0.
Demo Code :
$(document).ready(function() {
$(".hideSection2").hide();
divs = $(".divs").children();
divs.each(function(e) {
if (e != 0)
$(this).hide();
});
var index = 0,
divs = $(".divs").children();
//declare
var indexes = 0;
$(".button").click(function() {
//get div length
var lengths = divs.length;
//checking if btn clicked is next
if ($(this).is('#next')) {
//checking if value if less then length
if ((indexes < (lengths - 1))) {
//increment
//remove
$(this).prop('disabled', false);
$(this).css("background-color", "blue");
console.log("in - " + indexes)
//show div
index = (index + 1) % divs.length;
divs.eq(index).show().siblings().hide();
//to show result
show_data1(indexes);
indexes++;
} else {
$(".hideSection2").show();
$(".hideSection1").hide();
console.log("i am in last question reached")
$(this).prop('disabled', true); //disable
$(this).css("background-color", "#00FFFF"); //chnagecolor
$("#prev").css("background-color", "blue");
}
} else if ($(this).is('#prev')) {
//chcking id value is not 0
if (indexes != 0) {
//remove
$(this).prop('disabled', false);
$(this).css("background-color", "blue");
indexes--;
//show
index = (index - 1) % divs.length;
divs.eq(index).show().siblings().hide();
console.log("back - " + indexes)
show_data1(indexes); //show result
} else {
console.log("no back question")
//disabled
$(this).prop('disabled', true);
//add color chnage
$(this).css("background-color", "#00FFFF");
$("#next").css("background-color", "blue");
}
}
});
function show_data1(indexes1) {
//pass indexes value to get required div
var $container = $('.divs').children().eq(indexes1);
var id = $container.find(".h2Val").text().trim();
var $checked = $container.find('.cbCheck:checked');
var values = $checked.map(function() {
return this.value
}).get();
//console.clear()
console.log('ID: ' + id + ' has ' + $checked.length + ' checked');
console.log('Values: ', values.join())
}
$(".getVal").click(function() {
//get id
var id = $(this).attr("data-id");
$(".hideSection1").show();
$(".hideSection2").hide();
//subtract one , because div starts from 0 ,1..etc
var new_id= id - 1;
//show div
divs.eq(new_id).show().siblings().hide();
index = new_id; //settting value of index again for click of next button
indexes = new_id; //setting value for index
show_data1(indexes) //show answer as well when user click of question no.
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hideSection1">
<div class="divs">
<div class="heading">
<div class="h2Val">1</div>
<div>What's the capital of England?</div>
<div class="heading2">
<div><input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
</div>
</div>
<div class="heading">
<div class="h2Val">2</div>
<div>Who invented computer?</div>
<div class="heading2">
<div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
</div>
</div>
<div class="heading">
<div class="h2Val">3</div>
<div>Who invented computehttr?</div>
<div class="heading2">
<div><input type="checkbox" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
</div>
<div class="heading2">
<div><input type="checkbox" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
</div>
</div>
</div>
<a class="button" id="prev">Previous</a>
<a class="button" id="next">Next</a>
</div>
<div class="hideSection2">
<div class="container">
<div class="row">
<div class="divs2">
<a class="getVal" data-id="1">1</a>
<a class="getVal" data-id="2">2</a>
<a class="getVal" data-id="3">3</a>
</div>
</div>
</div>
</div>

Call specific div, as per input value

I'm trying to call specific div as per the input value. below is the expected result
If type "one" in input filed result should view as "Page one",
If type "two" in input filed result should be "Page two",
If type anything else in input filed result should be "Page three"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
<script>
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_one = "two";
if (v_input = v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
} else if (v_input = v_two) {
$('#one').hide();
$('#two').show();
$('#three').hide();
} else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
</script>
</body>
Please, advice how to fix this issue, thanks in advance

You can get the input from your textbox using:
const inputText = $("#enter").val();
And the you can select a given "page" to show using:
$("#" +inputText);
If the length of this selected item is 0 (which is fasley) then the page doesn't exist so you can then show the div with the id of three. If the length of the selected item is not zero (truthy) then that means the selected item exists, and so you can show it using:
$("#" +inputText).show();
You can also add a class called page to your div's so you can toggle their visibility more specifically and easily.
See working example below:
const test = function() {
const inputText = $("#enter").val();
$('.page').hide(); // hide all open pages (then later we will show the selected one)
const elemToShow = $("#" +inputText);
if(!elemToShow.length) {
$("#three").show();
} else {
$("#" +inputText).show();
}
}
.page {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page" id="one" name="one">
<h1>Page One</h1>
</div>
<div class="page" id="two" name="two">
<h1>Page Two</h1>
</div>
<div class="page" id="three" name="three">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="one" />
<input type="button" value="Click here" onclick="test();">

You had various little mistakes. Re-assigning v_one variable, in if you should use == instead of = and you missed a }.I think that was all. If you already have jquery cdn defined delete mine.
<body>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
if (v_input == v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}else if (v_input == v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
</script>
</body>

First, remove all inline javascript, then remove all inline styles.
Once we have that, give your elements a common class name, so that we can hide them in a single line.
After that, simply take the value and put it into the selector.
$('#btn').on('click', () => {
const value = $('#enter').val();
$('.showHide').hide();
$('#' + value).show();
});
.showHide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" class="showHide">
<h1>Page One</h1>
</div>
<div id="two" name="two" class="showHide">
<h1>Page Two</h1>
</div>
<div id="three" name="three" class="showHide">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" id="btn" value="Click here">

You have problem in defining the v_two and in if ==
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
if (v_input == v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (v_input ==v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">
</body>

You can try this
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
// all are hidden
$('#one').hide();
$('#two').hide();
$('#three').hide();
var nameId = "#three"; // variable to get id or you can keep this as empty
if (v_input == v_one) {
nameId = '#one';
} else if (v_input == v_two) {
nameId = '#two'
} else {
nameId = '#three'; // you can use this section for default behaviour
}
// Show selected name
$(nameId).show();
}
Hope this helps!

try this and let me know is it helpful or not
function test() {
var v_input = document.getElementById("enter").value;
$('#three ,#one ,#two').hide();
if (v_input == "one" || v_input == "two") {
$('#' + v_input).show();
} else {
$('#three').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">

What you will need, is a two way binding in pure java script to achieve your goal.
Here is the basic snippet for your code:
function DataBind(element, data) {
this.data = data;
this.element = element;
element.value = data;
element.addEventListener("change", this, false);
}
DataBind.prototype.handleEvent = function(event) {
switch (event.type) {
case "change": this.change(this.element.value);
}
};
DataBind.prototype.change = function(value) {
this.data = value;
this.element.value = value;
};
var obj = new DataBind(document.getElementById("enter"), "");
var pageField = obj.element;
pageField.onkeydown = updateNameDisplay;
pageField.onkeyup = updateNameDisplay;
pageField.onkeypress = updateNameDisplay;
function updateNameDisplay() {
//key down event
}
function test() {
var v_one = "one";
var v_two = "two";
if (obj.element.value === v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (obj.element.value === v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" name="one" style="display:none;">
<h1>Page One</h1>
</div>
<div id="two" name="two" style="display:none;">
<h1>Page Two</h1>
</div>
<div id="three" name="three" style="display:none;">
<h1>Page Three</h1>
</div>
<input type="text" id="enter" name="enter" value="" />
<input type="button" value="Click here" onclick="test();">

probably it is because you re-assign the value of var v_one
var v_one = "one";
var v_one = "two";

There are many issues in your JavaScript:
Missing the last bracket.
Missing assignment of v_two.
For comparing you have used single equal (=) it should be double equals(==).
<script type="text/javascript">
function test() {
var v_input = document.getElementById("enter").value;
var v_one = "one";
var v_two = "two";
if (v_input == v_one) {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (v_input == v_two){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else {
$('#one').hide();
$('#two').hide();
$('#three').show();
}
}
I have updated your javascript hope it helps.

find a div by classname and replace it with a div based on onclick - jquery

There are 8 divs and an empty div. Also there are 8 checkboxes. Initially 4 divs are displayed and the remaining are display:none and 4 checkboxes are checked and remaining are uncheked
The Fiddle link is here
This is my code
<div class="container">
<div class="empty" style="display:none;"></div>
<div class="content div_box_1">
<div class="box " style="background:black;"></div>
</div>
<div class="content div_box_2">
<div class="box " style="background:blue;"></div>
</div>
<div class="content div_box_3">
<div class="box " style="background:yellow;"></div>
</div>
<div class="content div_box_4">
<div class="box " style="background:orange;"></div>
</div>
<div class="content div_box_5">
<div class="box " style="background:pink; display:none;"></div>
</div>
<div class="content div_box_6">
<div class="box " style="background:indigo; display:none;"></div>
</div>
<div class="content div_box_7">
<div class="box " style="background:red; display:none;"></div>
</div>
<div class="content div_box_8">
<div class="box " style="background:skyblue; display:none;"></div>
</div>
<div class="checks">
<input type="checkbox" name="box1" checked value="1" class="css-checkbox"/>black
<input type="checkbox" name="box2" checked value="2" class="css-checkbox"/>blue
<input type="checkbox" name="box3" checked value="3" class="css-checkbox"/>yellow
<input type="checkbox" name="box4" checked value="4" class="css-checkbox"/>orange
<input type="checkbox" name="box5" value="5" class="css-checkbox"/>pink
<input type="checkbox" name="box6" value="6" class="css-checkbox"/>indigo
<input type="checkbox" name="box7" value="7" class="css-checkbox"/>red
<input type="checkbox" name="box8" value="8" class="css-checkbox"/>sky-blue
When I uncheck any of these 4 checked boxes the respective div must hide and the class=empty div must be shown eg if I uncheck checkbox with value=2 then div with class="div_box_2 must be hidden and in that place div with class=empty must be displayed and again when checkbox with value=5 or value=6 or value=7 or value=8 is checked then the div with class=empty must be hide and the corresponding div with class=div_box_5 or class=div_box_6 or class=div_box_7 or class=div_box_8 must be displayed in the place of empty div.
Its like removing a div and putting a default div in that place and when again some other div is to be displayed then that div must be displayed in the place of default div
How is this possible?
Please anyone help.
Thank you in advance

What you need is a empty container is each of the content element. You can use a script to add it
//add an empty container to all content elements
$('.container .content').append('<div class="empty" style="display:none;"></div>');
$("input.css-checkbox:checkbox").click(function () {
var cval = $(this).val();
var $div = $(".div_box_" + this.value).slideToggle("fast");
$div.next()[this.checked ? 'slideUp' : 'slideDown']("fast");
})
Demo: Fiddle

EDIT
JSfiddle: click
I changed a few thing:
I removed your style from your HTML and put it in your CSS;
You want to replace the divs so there is no need to hide any;
Let me explain the JS:
var divs = [];
divs.push('<div class="content" id="empty">' +
'<div class="box div_box_0 empty"></div>' +
'</div>');
$('.box').each(function (index) {
divs[index+1] = $(this).parent();
$(this).parent().remove();
});
var selected = [];
var max_boxes = 4;
$('.css-checkbox').each(function () {
if ($(this).is(':checked') && selected.length < max_boxes) {
selected.push(divs[selected.length + 1]);
} else {
$(this).attr('checked', false);
}
});
while (selected.length < 4) {
selected.push(divs[0]);
}
for (var i in selected) {
$('.container').append(selected[i]);
}
$(".css-checkbox").click(function(){
if ($('.css-checkbox:checked').length > 4) {
$(this).attr('checked', false);
} else {
var cval = $(this).val();
var checked = $(this).is(':checked');
if (checked) {
var empty = $.inArray(divs[0], selected);
selected[empty] = divs[cval];
$('#empty').replaceWith(divs[cval]);
} else {
var filled = $.inArray(divs[cval], selected);
selected[filled] = divs[0];
$('.container').find(divs[cval]).replaceWith(divs[0]);
}
}
});
First I create an array with the divs so you can place and replace them. The empty div has to be put in manually, since you want this one more than once. In the array you get a reference to the element. Next i remove each div out of your html.
Next I get the selected boxes and put the div by value in the selected array. After that I append the first 4 selected divs to the container.
The click function checks if there are 4 boxes clicked, when you click on a 5th one it removes the check immediately. Next there is a check to see if you checked or unchecked the checkbox. When you check it, replaces the first empty div with the selected div. If you uncheck it replaces the selected div with an empty div.

Try this Demo
$(function() {
var selectCheckBox = $(".checks input:checkbox")
$(selectCheckBox).click(function() {
var checkingValue = $(this).val()
if(checkingValue == 1){
$('.div_box_1').toggle();
}
else if(checkingValue == 2){
$('.div_box_2').toggle();
}
else if(checkingValue == 3){
$('.div_box_3').toggle();
}
else if(checkingValue == 4){
$('.div_box_4').toggle();
}
})
var selectHiddenChecks = $('.checks input:checkbox')
$(selectHiddenChecks).click(function() {
var checkingValue = $(this).val();
if(checkingValue == 5) {
$('.div_box_5').toggle();
}
else if(checkingValue == 6) {
$('.div_box_6').toggle();
}
else if(checkingValue == 7) {
$('.div_box_7').toggle();
}
else if(checkingValue == 8) {
$('.div_box_8').toggle();
}
})
})

Show DIV dynamically when clicking on Radio Selection

I have been supplied with this code that I can't seem to get working, I've looked around previous questions but can't find anything exactly like it. Maybe it's just totally wrong and should just start again?
What I want to do is show a div when a radio button is selected. Here is my code:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[478]"]').change(function(){
var val1 = $("input[name='item_meta[478]']:checked").val();
if (val1== "España") {
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
}
if (val1== "Intracomunitario") {
document.getElementById("div2").style.display = "block";
document.getElementById("div1").style.display = "none";
}
}
</script>
<form>
Show form?
<input type="radio" onclick="frmCheckDependent(this.value,'478')" checked="checked" value="España" id="field_478-0" name="item_meta[478]">España
<input id="field_478-1" type="radio" onclick="frmCheckDependent(this.value,'478')" value="Intracomunitario" name="item_meta[478]">Intracomunitario
</form>
<div id="div1" style="display:none">
Custom form España
</div>
<div id="div2" style="display:none">
Custom form Intracomunitario
</div>
Thanks a lot !
A programmer told me I could do what I want to do with:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[988]"], input[name="item_meta[989]"]').change(function(){
var val1 = $("input[name='item_meta[988]']:checked").val();
var val2 = $("input[name='item_meta[989]']:checked").val();
if (val1 !=undefined && val2 != undefined)
{$("#field_keytotal").val(val1+' '+val2);}
});
});
</script>
And:
<form>
Show form?
<input type="radio" id="showform" value="yes" name="showform" onchange="showhideForm(this.value);"/>Yes
<input type="radio" id="showform" value="no" name="showform" onchange="showhideForm(this.value);"/>No
</form>
<script type="text/javascript">
function showhideForm(showform) {
if (showform == "yes") {
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}
if (showform == "no") {
document.getElementById("div2").style.display = 'block';
document.getElementById("div1").style.display = 'none';
}
}
</script>
<div id="div1" style="display:none">
[formidable id=18]
</div>
<div id="div2" style="display:none">
You are not qualified to see this form.
</div>
jsfiddle.net/cvn6n/72

You're missing a closing bracket. Add one before the </script>