Multi tool use

how to toggle items based on click?

I have 3 settings that has 3 sub settings . I want to toggle sub setting of settings 1 when settings 1 is clicked and so on ..

I tried this jquery that includes ajax code also :

function settingsClicked() {
$(document).ready(function() {
$('div.settings>i ').click(function () {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
$('.sub-settings').toggle();
var x = this.className;
if( x == 'fas fa-toggle-off'){
var msg = "Settings Disabled"
var posting = $.post ( "request.php", {displayMsg:msg});
posting.done( function (data) {
alert(data);
});
}
else {
var msg = "Settings Enabled"
var posting = $.post ( "request.php", {displayMsg:msg});
posting.done( function (data) {
alert(data);
});
}
});
});
}


this is my html code :

<div class="settings">
<div class="settings-heading">Settings 1 : </div>
<i class="fas fa-toggle-off" class="settings-btn"></i>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 1 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 2 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 3 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
</div>
<div class="settings">
<div class="settings-heading">Settings 2 : </div>
<i class="fas fa-toggle-off" class="settings-btn"></i>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 1 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 2 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 3 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
</div>
<div class="settings">
<div class="settings-heading">Settings 3 : </div>
<i class="fas fa-toggle-off" class="settings-btn"></i>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 1 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 2 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
<div class="sub-settings">
<div class="sub-settings-heading">Sub-Settings 3 : </div>
<i class="fas fa-toggle-off" class="sub-settings-btn"></i>
</div>
</div>


css code :

.settings {
padding: 10px;
background-color: white;
}

.col-md-12 {
border: 2px solid #dee2e6;
border-radius: 10px;
background-color: white;
margin-bottom: 2%;
}

.settings-heading {
display : inline-block;
font-size: 1.2em;
color: #343A40;
font-family: 'Dosis', sans-serif;
font-weight: bold;
width: 95px;
}

.sub-settings {
display: none;
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 50%;
}

.sub-settings-heading {
display: inline;
}

.settings i {
font-size: 20px;
}

.fa-toggle-on {
color: green;
}


which looks like this on webpage where i want to display sub settings of 1 when settings 1 is clicked along with their icon being able to change to on / off

2 Answers
2

I have changed code to show sub-settings specific clicked element:

Change is:

$(this).parent('.settings').children('.sub-settings').toggle();
$(this).parent('.settings').children('.sub-settings').children('i').addClass('fa-toggle-on').removeclass('fa-toggle-off');


DEMO: https://codepen.io/creativedev/pen/jKXgmG

$(document).ready(function() {
$('.sub-settings').hide();
$('div.settings>i ').click(function() {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
$(this).parent('.settings').children('.sub-settings').toggle();
var x = this.className;
if (x == 'fas fa-toggle-off') {
var msg = "Settings Disabled"
var posting = $.post("request.php", {
displayMsg: msg
});
posting.done(function(data) {
alert(data);
});
} else {
var msg = "Settings Enabled"
var posting = $.post("request.php", {
displayMsg: msg
});
posting.done(function(data) {
alert(data);
});
}
});
});


you can create a class for no-display and add or remove it from the element as needed.

var toggle = false;

$("#show").click(function(){
if(toggle){
$("#Main").addClass("noDisplay");
toggle = false;
}else{
$("#Main").removeClass("noDisplay");
toggle = true;
}
});

.noDisplay{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button id="show">Show/hide</button>


<div id="Main" class="noDisplay">
<h2>Content to hide or show </h2>
<h2>Content to hide or show </h2>
<h2>Content to hide or show </h2>
</div>

and as there are settings instead of posting an individual setting event you can add a save changes to post all at once.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.