display hidden divs when another div is clicked - javascript

I am currently try create a custom navigation on websites homepage that uses tiles for navigation.
I am using MVCSiteMapProvider for MVC5 to display live tiles on the homepage as well as a standard bootstrap navbar, when the user loads the homepage only the main parent navigation any values nested under the parent are hidden.
The CSHTML below is what I have managed to create so far:
<section id="content">
<div class="main-content">
#{
var nodes = MvcSiteMapProvider.SiteMaps.Current.CurrentNode;
}
#foreach (var node in nodes.RootNode.ChildNodes)
{
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
foreach (var childNode in node.ChildNodes)
{
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
}
}
</div>
</section>
<script type="text/javascript">
$('.live-tile').on('click', function () {
var ids = $('.live-tile').map(function () {
return this.id;
}).get();
$.each(ids, function (index, value) {
});
});
</script>
I need some guidance on how to display multiple divs when one of the parent tiles (div) is clicked.
I only want to show the child elements, currently I am try to do this using the id of the parent div as a class on it child elements, when the parent is clicked the other top level divs should be hidden and the child elements and parent should be visible.
Any advice would be very much appreciated.

Try this:
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
</div>
$('.live-tile').on('click', function () {
$('.main-content>div').not('.live-tile').addClass('hidden');// hide all divs on click
$('.main-content>div').removeClass('clicked');
$(this).addClass('clicked');
$('.clicked').nextUntil( '.live-tile', "div.hidden" ).removeClass('hidden');// now show the next hidden ones
});

Related

How do I use JavaScript to select content and move to other elements?

I need to move some text from demoBoxA to demoBoxB.
The demoBoxA parent element has an id selector, but the child element below it has no identifiable selector.
Is it possible to select the text content directly? Then move it into the demoBoxB sub-element (the demoBoxB sub-element has an id selector)
There are 2 difficulties with this issue.
The content of demoBoxA is dynamically generated by the program and the sort is not fixed. There are no identifiable selectors for the subelements.
only need to select part of the content. For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".
Any help, thanks in advance!
<div class="container" id="demoBoxA">
<div class="row">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6">Mate 30 5G</div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6">KEY2</div>
</div>
<div class="row">
<div class="col-md-6">Apple</div>
<div class="col-md-6">iPhone 8</div>
</div>
</div>
<div class="container" id="demoBoxB">
<div class="row">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
You can chain selectors like this:
var rows = document.querySelectorAll("#demoBoxA > .row");
That will return a list of all rows inside of demoBoxA. If you need more info about chaining selectors, you can read about it here.
Then, to move the rows you can do this:
var demoBoxB = document.getElementById('demoBoxB');
rows.forEach((row) => {
demoBoxB.appendChild(row);
});
If you just want the text inside each of the columns, you can do this:
var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
texts.push(column.innerText);
});
Now, texts is an array of the text contents of each column.
If you want to select the cellphone models for each brand, you can do this:
var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
return col.textContent == "Samsung";
});
var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
if (col != samsungCol) {
samsungPhones.push(col);
}
});
Now, samsungPhones is a list of columns, one for each Samsung phone (for example).
You can use html drag api .
Just add draggable=true for elements you want to drag and add event listeners for dragstart and dragend
html
<div class="container" id="demoBoxA">
<div class="row " draggable="true">
<div class="col-md-6">Samsung</div>
<div class="col-md-6">Galaxy S10</div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6">Pixel 4</div>
</div>
<div class="row" draggabble="true">
<div class="col-md-6">Sony</div>
<div class="col-md-6">Xperia 5</div>
</div>
</div>
<div class="container " id="demoBoxB">
<div class="row " draggable="true">
<div class="col-md-6">Google</div>
<div class="col-md-6" id="pixel"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">Huawei</div>
<div class="col-md-6" id="mate"></div>
</div>
<div class="row" draggable="true">
<div class="col-md-6">BlackBerry</div>
<div class="col-md-6" id="key2"></div>
</div>
</div>
js
document.addEventListener('dragstart', function(e)
{
item = e.target;
}, false);
document.addEventListener('dragend', function(e)
{
document.getElementById("demoBoxB").appendChild(item)
}, false);
Note : you might have to add conditions to check whether the drop is actually happening in demoboxB

javascript remove parent div where particular class appears in hierarchy below

First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>
You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>

Select div having similar class name but no div id

Parent Class inddetails-wrapper clearfix has two divs which as further classes having same name.
I want to select first class col-md-6 nopadding. How should I do that ?
Below is the code:
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>
You can use :first-child:
.inddetails-wrapper div:first-child .col-md-6 {
background: #f00;
}
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>
as this question was tagged under jquery You can select the first element inside <div class="inddetails-wrapper clearfix"> using Jquery like this:
var firstChild = $( ".inddetails-wrapper.clearfix div" ).first();
and you can play with firstChild using more jquery properties depending upon what do you need.

Expandable divs with bootstrap

I have an issue whereby due to the structure of my html, when one div is expanded the whole row moves down. I am having a bit of a hard time finding a fix for this. I have looked on here but could not find a resolution. Any ideas would be great. This is my structure (with div 1 expanded to show the nature of the issue):
expandable div 1 | expandable div 2
|
| expandable div 4
|
expandable div 3 |
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-primary">
expandable div 1
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 2
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 3
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel">
expandable div 4
</div>
</div>
</div>
</div>
As you mentioned you don't want to use the bootstrap collapse I suggest to do this with jQuery (see below for an example).
Your HTML:
<div class="container">
<div class="header"><span>Expand</span>
</div>
<div class="content" style="display: none;"padding : 10px;>
Suprise!
</div>
</div>
Now the jQuery:
$(".header").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(300, function () {
$header.text(function () {
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
Something like this will work.
Consider CSS for the style display.

Use Kendo UI Flip Effects / Combined Effects for multiple items on the same page

I need to use kendo ui to display between 6-60 items. Each using the flip effect here http://demos.telerik.com/kendo-ui/fx/combined
The products will be loaded from the database with the unique id like this:
<div class="row">
<div class="col-md-4 product-container">
<div id="productID1" class="productID">
<div class="product">
<div id="product-back1" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front1" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID2" class="productID">
<div class="product">
<div id="product-back2" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front2" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID3" class="productID">
<div class="product">
<div id="product-back3" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front3" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
The problem is I need multiple panels on the page how can I make each "front" and "back" click unique.
var el = kendo.fx($('div[id^=productID]')),
flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
zoom = el.zoomIn().startValue(1).endValue(1);
flip.add(zoom).duration(200);
$('div[id^=product-front]').click(function () {
flip.stop().play();
});
$('div[id^=product-back]').click(function () {
flip.stop().reverse();
});
I've tried loading each item into an array but have not found a good way to assure the correct item will be flipped.
Since every div[id^=product-front] is a child of div[id^=productID], you can find the children of that and use it.
replace flip.stop().play(); with
kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();

Categories