I am new and start to learn writing html. In my code, the situation would be that when I click to a button, I used $(event.currentTarget).parents('.page-container') to get the whole html element of my currentTarget and then I have all elements like below:
<div class="page-container">
<div id="mainContainer" class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div id="accordionSummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
<div class="mainTenant">
<div class="subTenant">
<h5 data-toggle="collapse" data-parent="#accordionSummaryList" href="#toggleAbleListGroup1">Admins</h5>
<div class="container-fluid panel-collapse collapse in" id="toggleAbleListGroup1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
What I would like to do is I would like to find all of the div element which have the class = "collapse in" and I want to remove the class "in" to hide the content inside of this div box.
How can I do that?
in vanilla-JS
[].forEach.call(document.querySelectorAll('.subTenant .collapse.in'), function(el){
el.classList.remove('in');
}
or with jQuery (if already included)
$('.subTenant .collapse.in').removeClass('in');
If you want to do it with jquery: $(".collapse.in").removeClass("in")
you can do it with jquery
jQuery('.collapse').removeClass('in');
You can also do it with this
if($(event.currentTarget).parents('.page-container').find('.collapse'))
{
$('.collapse').removeClass('in');
}
Related
Here i have HTML structure and the same structure may repeat number of times with the same class names. what i'm trying to do is once i click on the .innerDiv i should be able to access the attr value of the .inid close to its parent element.
here is what i have tried, but its not working. i also tried adding the classname to the element i'm trying to get the value from. but its adding the class to all the element with .inid. how can i do this?
HTML
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Jquery
$(this).on('click',function(){
$('.innerDiv').parents().find('.inid').addClass('testclass');
$('.innerDiv').parents().find('.inid').attr(data-attr);
});
To achieve expected result, use index of innerDiv and add class-testclass to element with class- inid
Find index of clicked innerDiv using index('.innerDiv)
Use that index to add class using eq
Add some sample css to testclass for testing
Syntax error in your code - closing quotes missing for class- second-most-innerdiv
Codepen - https://codepen.io/nagasai/pen/
working example
$('.innerDiv').on('click',function(){
$('.inid').eq($(this).index('.innerDiv')).addClass('testclass');
console.log($('.inid').eq($(this).index('.innerDiv')).attr('data-attr'))
});
.testclass{
background: red;
height: 10px;
width:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv">
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
<div class="parent_div">
<div class="content-container">
<div class="second-most-innerdiv>
<div class="container-box">
<div class="innerDiv">Click here</div>
</div>
</div>
</div>
<div class="inid" data-attr="jkoadoas-Kjksjfks_skaj"></div>
</div>
Using JQuery closest() feature to find the parent div, then find the element with class "inid" within that parent element and get the value of the attribute.
$('.innerDiv').on('click',function(){
var inid = $(this).closest('.parent_div').find('.inid');
inid.addClass('testclass');
console.log('selected -> ' + inid.attr(data-attr));
});
Source: https://api.jquery.com/closest/
To start, here's a JSFiddle:
https://jsfiddle.net/RobGADV/kuy8wsLg/
<div class="tocButtonsDiv">
<div class="tocListItems">
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="51" data-title="Bacon Ipsum">Bacon Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="43" data-title="Pirate Ipsum">Pirate Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="48" data-title="Klingon Ipsum">Klingon Ipsum</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="8" data-title="klingon anchor">klingon anchor</div>
</div>
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="10" data-title="klingon anchor too">klingon anchor too</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="52" data-title="Plastic Onion Rings">Plastic Onion Rings</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="11" data-title="Condiments">Condiments</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="53" data-title="Porcupines For Fun">Porcupines For Fun</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="54" data-title="Tragedy At 7-11">Tragedy At 7-11</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="9" data-title="tragedy anchor">tragedy anchor</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="57" data-title="Something Fancy">Something Fancy</div>
</div>
</div>
</div>
Basically, I have a list of Items and Subitems, as you can see if you run the fiddle. The larger boxes are the Items, the smaller boxes are subitems, grouped below its parent Item. Make sense so far?
I want to be able to do the jqueryUI sortable() routine on each of the sets; meaning, I want to be able to reorder the Items (large buttons), and then also reorder the subItem (small buttons) under its parent Item.
I have the entire thing under a div called tocButtonsDiv. Inside that is a div called tocListItems, which contains ALL of the Items ("tocItem") (and their respective subItems).
The way it is in the Fiddle right now is the only way it works at all, but it's not keeping the subItems with the parent, and in fact, treats the subitems as a single group (whether there's one, two or more). I know my markup may need a little work, but I wonder if the .sortable() method has some more options I'm not aware of that will let me associate the subItems to the Items.
FWIW, the Fiddle as presented doesn't work at all; not sure why. This is my first time actually using JSFiddle.
Thank you for your help!
How to hide the div "whole" when click on #clickit so that my setting page content won't show and .user page will show in ui-view
setting html page
<!-- page content -->
<div class="whole">
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit"> // <-- Click to hide "whole" class
<div class="col-md-12 col-sm-12 col-xs-12">
<a ui-sref=".user">Users & practitioners</a>
</div>
</div>
</div>
</div>
<div ui-view> // I HAVE TO SHOW THIS DIV AND HIDE SETTING DIV
</div>
<!-- /page content -->
I don't want a jquery solution.. all i need a angular of pure javascript solution
<div class="whole" ng-hide="hideWhole> // <-- assign a scope var dependency
<div class="page-title">
<div class="title_left">
<h3>Settings</h3>
</div>
<div class="clearfix"></div>
<div class="row" id="clickit" ng-click="hideWhole=1"> // <-- update scope var
Ideally you'll use a controller variable (ctrl.hideWhole in controllerAs syntax) so you can update the display of the element from elsewhere in the app.
Here is a JavaScript solution to your problem, attaching a function to the onclick event of your element which sets the css display attribute to none.
<div class="row" id="clickit" onclick="hideWhole()">
function hideWhole() {
var wholeDiv = document.getElementsByClassName(".whole");
wholeDiv.style.display = 'none';
}
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
I need to clone a div with its children, I know the clone() function in jQuery, but I need to change the style of the parent div, or change the id name or show the whole div by animate, is there any way to do this?
This is the div I need to clone and I need to change the top attribute
<div class="news">
<div class="meta-inform">
<div id="waiting">not accepted</div>
<div id="accpted">accepted</div>
<div class="edit">
<div class="editedBy" id="editedBy" >
<div id="editLabel" style="display:inline">edited by</div>
<div id="editorName" style="display:inline">arvin</div>
</div>
<div id="editTime" class="editTime">
<div id="editDate" style="display:inline" >چdate</div>
<div id="editDate" style="display:inline">time</div>
</div>
</div>
</div>
<div id="littleNews">
<div id="number">1000</div>
<div id="divider1"></div>
<div id="title">title</div>
<div id="divider2"></div>
<div id="littleNewsTime">time</div>
<div id="littleNewsDate">چdate</div>
<div id="divider3"></div>
<div id="category">cat</div>
<div id="part">part</div>
<div id="segment">sgmnt</div>
<div id="divider4"></div>
<div id="writer">writer</div>
<div id="view">view post</div>
</div>
<div class="functions">
<div id="edit">edit</div>
<div id="delete">delete</div>
<div id="accptThis">accept</div>
</div>
</div>
Use clone to clone the div with its children.
Use the attr function to change attributes.
Use the css function to change css attributes.
e.g.:
$('.news').clone().attr("id","whatever").css("width","50px")
Then for example, you can append it to any other container you want.
e.g.:
$('.news').clone().attr("id","whatever").appendTo($('body'));
You can also use addClass or removeClass to add/remove classes defined in your CSS files.
does that help?
You could just add new class name and then add proper styles into css, for example:
$('.news').clone().addClass("clone");
And to the css sheet:
.clone {
top: 100px;
}
$('.news').clone().attr("id","elementid").appendTo("body").animate({ 'top': '200px'}, 2000);