jQuery - Each checkbox toggles it's own menu - javascript

I want to be able to open / close each menu by checking / unchecking the corresponding checkboxes.
How do I show the menu when any of the checkboxes are checked? Right now the code is showing one at a time and isn't depending on the checkbox selection.
$(document).ready(function($) {
$('input[name="menus"]').change(function() {
const id = $(this).prop("id");
$(".menu").each(function() {
$(this).toggleClass("active", $(this).data("id") == id);
});
});
});
.menus div {
border: 1px solid;
height: 30px;
width: 100px
}
.menu {
opacity: 0;
visibility: hidden;
}
.menu.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.first {
background: blue
}
.second {
background: green
}
.third {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
<label>
<input type="checkbox" name="menus" id="first">First
</label>
<label>
<input type="checkbox" name="menus" id="second">Second
</label>
<label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
<div class="menu first" data-id="first"></div>
<div class="menu second " data-id="second"></div>
<div class="menu third" data-id="third"></div>
</div>

Can make an attribute selector from the id and toggle the corresponding menu item that way and leave the others unchanged
$('input[name="menus"]').change(function() {
$(".menu[data-id=" + this.id + "]").toggleClass("active", this.checked);
});
.menus div {
border: 1px solid;
height: 30px;
width: 100px
}
.menu {
opacity: 0;
visibility: hidden;
}
.menu.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.first {
background: blue
}
.second {
background: green
}
.third {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
<label>
<input type="checkbox" name="menus" id="first">First
</label>
<label>
<input type="checkbox" name="menus" id="second">Second
</label>
<label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
<div class="menu first" data-id="first"></div>
<div class="menu second " data-id="second"></div>
<div class="menu third" data-id="third"></div>
</div>

Here you go with the solution
$(document).ready(function($) {
$('input[name="menus"]').change(function() {
const id = $(this).prop("id");
const checkboxStatus = $(this).is(":checked");
$(".menu").each(function() {
if ($(this).data("id") == id) {
$(this).toggleClass("active", checkboxStatus);
}
});
});
});
.menus div {
border: 1px solid;
height: 30px;
width: 100px
}
.menu {
opacity: 0;
visibility: hidden;
}
.menu.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.first {
background: blue
}
.second {
background: green
}
.third {
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
<label>
<input type="checkbox" name="menus" id="first">First
</label>
<label>
<input type="checkbox" name="menus" id="second">Second
</label>
<label>
<input type="checkbox" name="menus" id="third">Third
</label>
</div>
<div class="menus">
<div class="menu first" data-id="first"></div>
<div class="menu second " data-id="second"></div>
<div class="menu third" data-id="third"></div>
</div>

Related

How to make div transition smooth

Upon clicking on the checkbox I want one element appears smoothly and other disappears smoothly
I have used UI Kit.
Here is the code of my attempt:
https://codepen.io/Abdubek/pen/wvwdaoE
UIkit.util.on("#button", 'click', function() {
UIkit.toggle("#red", {
animation: "uk-animation-fade"
}).toggle();
UIkit.toggle("#blue", {
animation: "uk-animation-fade"
}).toggle();
})
.red {
width: 250px;
height: 250px;
background: red;
}
.blue {
width: 250px;
height: 250px;
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<div class="uk-container uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<input type="checkbox" id="button" class="uk-button uk-button-primary uk-margin-bottom" />
<div id="red" class="red"></div>
<div id="blue" aria-hidden="true" hidden class="blue"></div>
</div>
$(document).ready(function(){
$('#button').change(function(){
if($(this).is(':checked')){
$('#red').addClass('blue');
}
else {
$('#red').removeClass('blue');
}
});
});
#red {
width: 250px;
height: 250px;
background: red;
transition: all 2s linear;
}
.blue {
width: 250px;
height: 250px;
background: blue !important;
transition: all 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="uk-container uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<input type="checkbox" id="button" class="uk-button uk-button-primary uk-margin-bottom"/>
<div class="main-container">
<div id="red">
</div>
</div>
</div>
Solved:
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js"></script>
<div class="uk-container uk-padding uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<p class="box box-first uk-card uk-card-default uk-card-body uk-text-muted uk-flex
uk-flex-middle uk-flex-center uk-text-lead uk-margin-remove">BOX [ A ]</p>
<p class="box box-second uk-background-primary uk-card uk-card-default uk-card-body uk-light uk-flex uk-flex-middle uk-flex-center uk-text-lead uk-margin-remove" hidden>BOX [ B ]</p>
<button
class="uk-button uk-button-default uk-margin"
type="button"
uk-toggle="target: .box; animation: uk-animation-fade; queued: true; duration: 300"
>Toggle Box</button>
</div>
You just need to stack one box on top of the other
.uk-container{
position : relative;
}
.red,.blue{
position:absolute;
top:50px
}
As you used checkbox you need to check checkbox is check or uncheck , I used jquery to solve this,
$(document).ready(function(){
$('#button').change(function(){
if($(this).is(':checked')){
$('#red').hide();
$('#blue').show();
}
else {
$('#red').show();
$('#blue').hide();
}
});
});
.red {
width: 250px;
height: 250px;
background: red;
transition: all 2s linear;
}
.blue {
width: 250px;
height: 250px;
background: blue;
transition: all 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="uk-container uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<input type="checkbox" id="button" class="uk-button uk-button-primary uk-margin-bottom"/>
<div class="main-container">
<div id="red" class="red">
</div>
<div id="blue" aria-hidden="true" hidden class="blue">
</div>
</div>
</div>

how to remove # in url when modal popup and submitted

Got a problem here.
I have a modal and when i open it using my code, my url extension extends like having this #mymodalid .
$(document).on("click", "input[name='txt1']", function() {
$('#modal1').show();
});
$(document).on("click", "input[name='txt2']", function() {
$('#modal2').show();
});
$(document).on("click", ".btn1", function() {
if ($('#modal1 :checkbox:checked').length > 1) {
$('input[name=txt1]').val('multiple');
} else {
$('input[name=txt1]').val($('#modal1 :checkbox:checked').prev('label').text());
}
$('#modal1').hide();
});
$(document).on("click", ".btn2", function() {
$('#modal2').hide();
});
$(".radio").change(function() {
$(".radio").prop('checked', false);
$(this).prop('checked', true);
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal1">
<!-- when the input textbox was clicked, modal will pop up -->
Label 1
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<br>
<br>
<a href="#modal2">
<!-- when the input textbox was clicked, modal will pop up -->
Label 2
<input readonly type="text" name="txt2" placeholder="inputTest">
</a>
<!-- modal starts here -->
<div class="modalwrapper" id="modal1">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
<div class="modalwrapper" id="modal2">
<!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Mango</label>
<input class="radio" type="checkbox" name="fruit1" value="1">
<div class="clear"></div>
<label>Banna</label>
<input class="radio" type="checkbox" name="fruit2" value="2">
<div class="clear"></div>
<label>Grapes</label>
<input class="radio" type="checkbox" name="fruit3" value="3">
<div class="clear"></div>
<div class="savebutton">
<button class="btn2" type="button" value="Submit">Submit</button>
</div>
</div>
<!-- close modalcol1 -->
</div>
<!-- close modalcontainer -->
<div class="overlay"></div>
</div>
<!-- close modalwrapper -->
</form>
What I need to do is that:
Show the modal as it needs on my program.
Checked some checkbox
Close the modal but on the url, #mymodalid should be remove once close.
Even if i closed the modal, what i was checked should be retain
I need to remove #mymodalid because when i redirected to the page itself upon submission, the modal will popup because of that #
Anyone, please help me.
Add a callback to your hide() functions:
$('#modal1').hide(400, removeHashFromUrl());
function removeHashFromUrl()
{
window.location.hash = '';
}
Or you could just just inline the callback, but it's obviously reusable in a function:
$('#modal1').hide(400, function(){window.location.hash = '';});
PS: 400 is the default speed for jQuery's hide().

$(document).on("change") not fire up on Mozilla Firefox

I have an issue with radio button and jquery. The onchange is working in Chrome but is not working in Mozilla Firefox. I put a breakpoint on the line below on Chrome and the browser is debugging normally, but when I am on Mozilla, this onchange never fires up
$(document).on("change", 'input[type="radio"]', function () {//code for doing something}
My HTML code is
<div id="tab-Pcy-2041" class="tab-pane active">
<div class="radio radio-small">
<label class="">
<div class="i-radio checked">
<input class="i-radio" data-ano="1" data-chno="0"
data-adce="0" data-chce="0" data-for="rbtncy"
xname="rbcy204" name="rbtncy2040" value="22038"
checked="checked" style="position: absolute; opacity: 0;" type="radio" />
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%;
display: block; width: 100%; height: 100%; margin: 0px; padding: 0px;
background: rgb(255, 255, 255) none repeat scroll 0% 0%; border:
0px none; opacity: 0;">
</ins>
</div>
test
</label>
</div>
<div class="radio radio-small">
<label class="">
<div class="i-radio">
<input class="i-radio" data-ano="1" data-chno="0"
data-ace="15" data-chce="15"
data-for="rbtncy" xname="rbtncy204"
name="rbtncy2040" value="22039"
style="position: absolute; opacity: 0;" type="radio" />
<ins class="iCheck-helper" style="position:
absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%;
margin: 0px; padding: 0px; background: rgb(255, 255, 255)
none repeat scroll 0% 0%; border: 0px none; opacity: 0;">
</ins>
</div>
test33:
<span class="ItemtestClass" data-itemce="15">
<span class="CurrencySymbolClass">€</span>
<span class="Itce"> 15</span>
</span>
Cd:
<span class="ItemtestClass" data-itemce="15">
<span class="CurrencySymbolClass">€</span>
<span class="Itemce"> 15</span>
</span>
</label>
</div>
</div>
With minimal markup and script you can refer to the working snippet below
$(document).on("change","input[type=radio]", function(){
console.log($(this).prop("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rd1" id="option1" /><label for="option1">Option 1</label><br />
<input type="radio" name="rd1" id="option2" /><label for="option2">Option 2</label><br />
<input type="radio" name="rd1" id="option3" /><label for="option3">Option 3</label><br />

Clear checkbox button not working

I have a CLEAR button. The aim of that CLEAR button is that when a user clicks the button, all selected checkbox values are removed. Thats it. Now somehow I managed to get a checkbox with the CLEAR button (seemed for me the only way), and also upon clicking then all checkbox values are selected and when clicking again all checkbox values are removed. Is it possible to get only the button and then just one click for just removal of selected checkboxes? My current code only works for the first filter-menu BRAND, but for the others it does not work, I cant figure out why.
Here my BOOTPLY - BOOTPLY
$("#clear").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
/* CSS used here will be applied after bootstrap.css */
/* FILTER_datafeed */
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
/* Filter-menu APPLY and CLEAR */
.select_filter > .multi_select_container > .div_form > .btn_apply {
border-right: 1px solid #e6e6e6;
box-sizing: border-box;
display: inline-block;
float: left;
padding: 10px 16px 10px 17px;
text-align: center;
width: 50%;
}
.select_filter > .multi_select_container > .div_form > .btn_clear.disabled, .select_filter > .multi_select_container > .div_form > .btn_clear[disabled], .select_filter > .multi_select_container > .div_form > .btn_clear[disabled]:hover {
background-color: transparent;
color: #ccc;
}
.select_filter > .multi_select_container > .div_form > .btn_clear {
box-sizing: border-box;
display: inline-block;
float: right;
padding: 10px 17px;
text-align: center;
width: 50%;
}
.checkbox :hover {
background-color:red;
cursor:pointer;
width:100%;
}
.div_form :hover {
background-color:green;
cursor:pointer;
}
.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
}
/* Type-ahead plugin */
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
/* Type-ahead plugin END */
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">Brand</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Primary buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Colour</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Eins</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Zwei
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Drei</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Vier</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fünf</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sechs
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Info buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-info" type="button">Merchant</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> First value</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Second option
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Third choice</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fourth alternative</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifth decision</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sixt focus
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-danger" type="button">Price</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Value-1</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-2
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-3</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-4</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-5</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-6
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
Man you are using the same ID four times. The ID selector always return a single element, in your case you are only attaching the event to the first input with the id #clear so it will be working ONLY on the first clear button. Use a class instead and somehow scope the changes to affect only the related checkboxes.
Change the IDs to classes and use the following:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', $(this).prop("checked"));
});
Working example
To make sure the clear button always clear the selection, you should always set the property checked to false like this:
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', false);
});
Updated example
It's only working for the first menu because an id is suppose to be unique. You are actually only applying an event listener to the first #clear element. In addition, you are toggling the checked property of all the checkboxes, not just the checkboxes in that dropdown menu.
Change the id attribute to a class, in this case, .clear, and when the change event is fired, select the closest .dropdown-menu element and toggle all the descendant checkbox elements:
Updated Example
$(".clear").on('change', function () {
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', this.checked);
});
You could also just remove the checkbox and attach a click event to the .btn_clear element. You will also need to stop the event propagation in order to prevent the dropdown element from closing:
Updated Example
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});

How to expand all nodes of tree view in button click?

I have created a tree view by using li and ul format (not using TreeView control). I want to expand all nodes using JavaScript. Please help me.
My CSS for tree view is as below:
#sitemap, #sitemap ul, #sitemap li
{
margin: 0;
padding: 0;
list-style: none;
}
#sitemap
{
background: url(../content/images/line1.gif) repeat-y;
}
#sitemap li
{
line-height: 20px;
margin-top: 1px;
position: relative;
width: 100%;
}
/* IE leaves a blank space where span is added so this is to avoid that */#sitemap li
{
float: left;
display: inline;
}
#sitemap li a
{
padding-left: 3px;
}
#sitemap li a.but
{
padding: 1px;
border: solid 1px #c0c0c0;
color: #080808;
font-size: 7pt;
margin: 2px;
font-weight: normal;
background-color: #efefef;
}
#sitemap li a.butGroup
{
padding: 2px;
border: solid 1px #888;
color: #080808;
font-size: 7pt;
margin: 2px;
background-color: #efefef;
font-weight: bold;
}
#sitemap li span
{
float: left;
position: absolute;
top: 5px;
left: 5px;
width: 13px;
height: 13px;
cursor: auto;
font-size: 0;
}
#sitemap li span, #sitemap li span.collapsed
{
background: url(../content/images/collapsed.gif) no-repeat 0 0;
}
#sitemap li span.expanded
{
background: url(../content/images/expanded.gif) no-repeat 0 0;
}
#sitemap li span.dot
{
background: url(../content/images/line2.gif) no-repeat -5px -5px;
}
#sitemap li ul
{
margin-left: 25px;
display: block;
clear: both;
background: #fff url(../content/images/line1.gif) repeat-y;
}
#sitemap li li
{
background: url(../content/images/line2.gif) no-repeat 0 0;
}
#sitemap, #sitemap ul
{
min-height: 1%;
}
#sitemap:after, #sitemap ul:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#sitemap, #sitemap ul
{
display: block;
}
#sitemap ul
{
display: none;
}
#sitemap li div.butHolder
{
clear: both;
margin: 10px 3px 3px 30px;
}
#sitemap li input[type=text]
{
width: 25px;
padding: 2px;
height: 14px;
border: solid 1px #888;
text-align: center;
}
div.LinkGroup
{
width: 95%;
margin-left: 20px;
text-align: left;
border: solid 1px #efefef;
background-color: #fcfcfc;
}
div.LinkGroup div
{
padding: 2px 1px 2px 1px;
font-size: 8pt;
}
div.TR
{
width: 100%;
margin-left: 20px;
text-align: left;
clear: both;
}
div.TR div.TH, div.TR div.TD
{
float: none;
min-width: 50px;
white-space: nowrap;
padding: 3px;
}
JavaScript:
$(document).ready
(function () {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
$(this).toggleClass("expanded");
if ($(this).find("ul:first").length > 0) {
$(this).find("ul:first").css("display", "none");
$span.attr("class", "collapsed");
//
//if more link clicks of "Manage Links" page functionality than show it expanded.
//or delete the element show parent menu expanded
//
if (jQuery.trim($(this).find("ul:first").css("content")).indexOf('expanded') > -1) {
$span.removeAttr("class");
$span.attr("class", "expanded");
$(this).find("ul:first").css("display", "block");
}
$span.click(function () {
$(this).toggleClass("expanded");
$(this).parent("li").find("ul:first").slideToggle("normal");
}
)
$(this).append($span);
}
else {
$span.removeAttr("class");
$span.attr("class", "dot");
$(this).append($span);
}
}
)
}
}
)
////HtML STructure
<ul id="sitemap">
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_1' class='module' moduleid='1' />
Start Configurations</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_1' class='child' id='menu_1' moduleid='1' parent='0'
checked='checked' />
Customer Registration</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_9' class='child' id='menu_9' moduleid='1' parent='0'
checked='checked' />
Configure Project</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_10' class='child' id='menu_10' moduleid='1' parent='9'
checked='checked' />
Search Customer</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_12' class='child' id='menu_12' moduleid='1' parent='9'
checked='checked' />
Test</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_13' class='child' id='menu_13' moduleid='1' parent='12'
checked='checked' />
Test_Child</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_14' class='child' id='menu_14' moduleid='1' parent='12'
checked='checked' />
Test_Child2</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_2' class='module' moduleid='2' />
Edit Configuration</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_3' class='child' id='menu_3' moduleid='2' parent='0'
checked='checked' />
Edit Configuration</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_11' class='child' id='menu_11' moduleid='2' parent='0'
checked='checked' />
Edit Customer Deatils</div>
</div>
</li>
</ul>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_3' class='module' moduleid='3' />
Administration</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_4' class='child' id='menu_4' moduleid='3' parent='0'
checked='checked' />
Project Stage</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_5' class='child' id='menu_5' moduleid='3' parent='0'
checked='checked' />
Module Management</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_6' class='child' id='menu_6' moduleid='3' parent='0'
checked='checked' />
Question Management</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_7' class='child' id='menu_7' moduleid='3' parent='0'
checked='checked' />
Access Group</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_8' class='child' id='menu_8' moduleid='3' parent='0'
checked='checked' />
User Creation</div>
</div>
</li>
</ul>
</li>
</ul>
//Expanding
<script type="text/javascript">
function fun1() {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
//$(this).toggleClass("expanded");
if ($(this).find("ul:first").length > 0) {
$span.removeAttr("class");
$span.attr("class", "expanded");
$(this).find("ul:first").css("display", "block");
$(this).append($span);
}
}
)
}
}
</script>
//Collapsing
<script type="text/javascript">
function fun() {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
if ($(this).find("ul:first").length > 0) {
$(this).find("ul:first").css("display", "none");
$span.attr("class", "collapsed");
$(this).append($span);
}
}
)
}
}
</script>

Categories