We Keep Coding

Using only JS and css, can I implement a filter, so that: clicking/tapping within a JS dropdown menu shows/hides page divs by data-type?

With the help of SO member the.marolie I learned how to implement a JS filter/selector [the 'demo JS filter']. I have this working perfectly on a test page: it shows/hides divs according to "data-types" assigned to them in the body html. However, the selection is made by sliding down a <select> dropdown list and letting go at the preferred option. That's not quite what I want.
I want to utilise my existing nav-bar dropdown ['my dropdown'] as the filter/selector. I especially want to retain the existing interactivity of my dropdown, whereby one click/tap reveals the whole of the dropdown content block, and one click outside the content block closes it.
I want the elements within my dropdown to represent various show/hide <div> 'options' for the html page, and enable the user to choose from these via an additional click/tap (essentially what the demo JS filter does, but at the instigation of a click/tap). Once revealed via a nav-bar click/tap, the whole dropdown content block has to stay on-screen -as it currently does- for this to be practically possible.
After making my dropdown identifiable via id="media-selector-demo" and name="filter" I was hoping that I could assign the demo JS filter's <option> elements to the <a> elements in it, and the whole thing would function like the <select> dropdown of the demo JS filter. I had a vague idea that using <a> elements might obviate the need for another onClick in the JS. I've tried various combinations of <a> and <option> elements, but nothing has worked yet.
Do I need another onClick to invoke the JS filter via my dropdown? or
Can I invoke the JS filter via 'active' <a> status?
I'm struggling by trial and error.
Here are what I think are the relevant sections of code pertaining to all discussed above:
My dropdown is based on the following code.
JS in the page head:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myDropdownJS() {
document.getElementsByClassName("navbarDROPDOWN-JS")[0].classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementsByClassName("navbarDROPDOWN-JS")[0];
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
My dropdown html in nav bar (most of the css is just design styling):
<span class="dropdown" onclick="myFunction()">
<a class="dropbtn navbarDROP-ICON" style="opacity:0.5; padding-top:0px;">menu</a>
<a class="dropbtn navbarDROP-TXT" style="opacity:0.5">menu </a>
<a class="dropbtn navbarDROP-TXT">Career Works by Date </a>
<div class="dropdown-content navbarDROPDOWN-JS" >
<a class="tag-bgd-INSTLLN" href="#">Installations (all media)</a>
<a class="tag-bgd-MOVIMG" href="#">Works with moving image (inc. vid/film releases)</a>
<a class="tag-bgd-SNDMUS" href="#">...with sound and music (inc. sound/music releases)</a>
<a class="tag-bgd-PHOTO" href="#">...with photographs</a>
<a class="tag-bgd-DRAW" href="#">...with drawing (inc. 2D works)</a>
<a class="tag-bgd-TXT" href="#">...with text</a>
<a class="tag-bgd-PERF" href="#">...with performative action</a>
<a class="tag-bgd-COLPUB" href="#">Collaborative and public works</a>
<a class="tag-bgd-OBJDEV" href="#">>Objects, garments, devices</a>
<a class="tag-bgd-EDPUB" href="#">Editions, publications</a>
<a class="tag-bgd-CAREER" href="#">Career Works by Date</a>
</div>
Above: the <a href> elements were going to contain URLs for alternatively styled pages. There is no need for these if I can enable the user to selectively show/hide parts of just this one page, via this dropdown.
The demo JS filter is based on the following code (via SO user the.marolie).
JS at page end:
var select = document.getElementById('media-selector-demo');
var filter;
select.addEventListener("change", function() {
filter = select.value;
var elements = document.querySelectorAll('.wk-date_ITEM');
elements.forEach((el) => {
var type = el.dataset.type.split(', ');
if (type.includes(filter)) {
el.classList.remove('hide-by-media');
} else {
el.classList.add('hide-by-media');
}
})
});
Demo JS filter CSS:
.hide-by-media {
display: none;
}
Demo JS filter html in page body:
<select id="media-selector-demo" name="filter">
<option value="INSTLLN"> Installations (all media)</option>
<option value="MOVIMG"> Works with moving image (inc. vid/film releases)</option>
<option value="SNDMUS" >...with sound and music (inc. sound/music releases)</option>
</select>
Example div in page body (there are 80-100 of these):
<!-- ++++++++++ START FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->
<div id="state-of-dread" class="w3-container wk-date_ITEM" data-type="INSTLLN, SNDMUS">
<div class="w3-container wk-date_TXT-IMG">
<div class="wk-date_GRID">
<div class= "h3 wk-date_DATE"> 2017 </div>
<div class="wk-date_TTL"><h1>State of Dread</h1></div>
<div class="h2 wk-date_KIND-1" >Installation</div>
<div class="p wk-date_KIND-2" ><span class="sound">Sound</span>, for x2 interconnected rooms.<br>AB, CD, EF, Solo exhibition (as trio), Ohrenhoch sound gallery, Berlin.</div>
<div class="wk-date_IMG">
<div class="w3-container w3-right wk-date_IMG-BOX-LSCP">
<img src="../../imgs/INSTALLATION-EVENT/2017_dread_thmb.jpg"
alt="'xx' by Andrew Stones, installation view, xx"></div>
</div>
</div>
</div>
</div>
<!-- ++++++++++ END FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->
Demo JS filter: JS at end of page:
<script type="text/javascript">
var select = document.getElementById('media-selector-demo');
var filter;
select.addEventListener("change", function() {
filter = select.value;
var elements = document.querySelectorAll('.wk-date_ITEM');
elements.forEach((el) => {
var type = el.dataset.type.split(', ');
if (type.includes(filter)) {
el.classList.remove('hide-by-media');
} else {
el.classList.add('hide-by-media');
}
})
});
</script>

What you would need to do is change the event listener from select, change to drop down element, click. you would also need to add the values of the options from the select as data-value attributes on the drop down elements.
1 - add a data-value attribute to the elements to represent what to hide
<a class="tag-bgd-INSTLLN" href="#" data-value="INSTLLN">
2 - target the drop down elements you want to attach the event listener to.
const dropDownElements = document.querySelectorAll('.dropdown-content a')
3 - attach event listeners to the selected targets (PS. the e in the function stands for event, click event listener produces an event object)
dropDownElements.forEach((dropDownElement) => {
dropDownElement.addEventListener('click',(e)=>{
const filter = e.target.dataset.value;
})
})
4 - the rest is just adding the rest of the filter used in the demo js filter
dropDownElements.forEach((dropDownElement) => {
dropDownElement.addEventListener("click", (e) => {
const filter = e.target.dataset.value
var elements = document.querySelectorAll(".wk-date_ITEM")
elements.forEach((el) => {
var type = el.dataset.type.split(", ")
if (type.includes(filter)) {
el.classList.remove("hide-by-media")
} else {
el.classList.add("hide-by-media")
}
})
})
})

Javascript - modal select option (unable to select item in modal)

Could someone kindly advise me how I go about expanding my code?
What I want to do is:
When the plots_container is clicked, this prompts up a modal with a list of charts in it
When the user clicks on a chart (eg: line plot in the modal), the content in the span stating hello hello changes to <span>line plot</span>
I would like to do something exactly like this
At the moment I have just managed to prompt up the modal when plots_container is clicked.
I would be very grateful if someone could take a look at what I've tried in the below files and provide suggestions or feedback.
index.html
<span class="modal_content">
<select class="hide seriesDetails" title="Type of Chart for this Series" id="ChartType" name="ChartType"><option selected="selected" value="17">Pie</option></select>
<div class="seriesDetails" id="plots_container">
<span>hello</span>
</div>
<div id="plotList">
<ul>
<li class="business">
<div class="image_text_content">
<div class="image_container"><img src="Content/images/plot-thumbs/1-scatter-plot.jpg" alt="scatter-plot"></div>
<div class="plot_title">scatter plot</div>
</div>
<div class="image_text_content">
<div class="image_container"><img src="Content/images/plot-thumbs/2-line-plot.jpg" alt="scatter-plot"></div>
<div class="plot_title">line plot</div>
</div>
</li>
</ul>
</div>
</span>
application.js
// modal to display types of plots
$(document).ready(function() {
$('#plots_container').click(function() {
$('#plotList').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#plotList");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
});

A quick JSFiddle: https://jsfiddle.net/hxnm7q2L/1/ to show how you can use an
.addEventListener("change", function(e) {
to trigger showing the value changing of a selected value in a modal.

If I correctly understood what you want, you could try something like this:
$('.plot_title').click(function(event){
$('#plots_container > span').html(event.target.innerText);
})
Though it would work only with html-structure that you've provided, since it has very specific css-selectors.

Display different container by clicking select fields

I have a simple select dropdown menu.
<select onchange="showDiv(this)">
<option value="1">Container 01</option>
<option value="2">Container 01 + 02</option>
<option value="3">Container 01 + 02 + 03</option>
</select>
I have three container. If I click in the select area on "container 01 + 02", container 1 and 2 should appear. If I click on "container 01", only container 01 appears.
<div id="container_01></div>
<div id="container_02></div>
<div id="container_03></div>
I have found a way to do this using Jquery:
function showDiv(select){
if(select.value==1){
document.getElementById('container_01').style.display = "block";
}
else if (select.value==2){
document.getElementById('container_01').style.display = "block";
document.getElementById('container_02').style.display = "block";
}
else if(select.value==3){
document.getElementById('container_01').style.display = "block";
document.getElementById('container_02').style.display = "block";
document.getElementById('container_03').style.display = "block";
}
This works fine for me!
Now my Problem:
To make the select fields more attractive, I'm using a pretty nice script, to pep up the selection. Here an example:
https://tympanus.net/Development/SelectInspiration/index3.html
The thing is, the script converts the select dropdown menu to a list element:
<ul>
<li class="" data-value="1"> <span>1</span> </li>
<li class="cs-selected" data-value="2"> <span>2</span> </li>
<li class="" data-value="3"> <span>3</span> </li>
</ul>
Is it possible, to rebuilt the effect, I have created for the select menu?
Get the data-value from li.cs-selected and display:
<div id="container_01></div>
<div id="container_02></div>
Im not pretty good at Javascript. Maybe someone can help me out, to solve this problem? Thank you!

Your aim is to get the class of List element selected, for that use this:
var elementSelected = document.getElementByClassName('your_class_name');
Upon storing a reference in elementSelected apply an event listener as:
elementSelected.onClick = function(){ //Code goes here }
OR you could use addEventListener method to do the same:
elementSelected.addEventListener("click", function(e) {
alert('something');
}, false);
Once the element is clicked you can get its value by using
var elementValue = elementSelected.value
Then you can transfer that value into the "select-option" drop down menu you've created.

I am not sure if you have or can use jQuery but you can use this script to get that values without needing select.
// I would add a classname or an id to differentiate from other ul tags.
$('ul.myMenuSelect').on('click', 'li', function(){
var value = $(this).data('value');
$(this).addClass('cs-selected').siblings().removeClass('cs-selected');
$('#container_' + value).show().siblings().hide();
})

$("li.cs-selected").attr("data-value")

How to show hidden div immediately after clicking on link

So I've made a function that, when you click on a button, a certain div comes up with its own content. When clicking on the button again, the div will hide and another div will show up. This div will always show up when none of the other three divs aren't selected.
The problem is when I'm adding an href tag with an anchor link which is connected to each div, that I must click twice on the button before the hidden div will show.
Check fiddle here: http://jsfiddle.net/449r8Lwv/
So as you can see, when you click on one of the buttons, nothing happens except that the url changes which is a good thing. But clicking AGAIN on the same button lets you show the hidden div. This is not what I want, I want the div show up the first time you click on the button already.
Also, when going directly to the url with an anchor name in it, It will immediately show the div with it's content that is connected to the anchor, that's a good thing. But then if you click another button again, it will show the div that must normally show when NONE of the divs aren't selected which is not the case.
Example: You go to url website.com/test.html#2. Then when you click on button 3, then content of the connected div must come("3") up but instead the div(named #text) will come up when that one should only come up if none of the divs that are connected to the buttons arent showing up.
HTML:
1
2
3
<br><br><br>
<div id="clicks">
<a class="click" id="showInfo" data-target=".1"><button>1</button></a>
<a class="click" id="showDataInput" data-target=".2"><button>2</button></a>
<a class="click" id="showHistory" data-target=".3"><button>3</button></a>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
JavaScript/jQuery
<script>
$(document).ready(function () {
var $targets = $('.target');
$('#clicks .click').click(function () {
var $target = $($(this).data('target')).toggle();
$targets.not($target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none':'')
/*$('#contact_info').toggle(!$targets.is(':visible'));*/
});
});
</script>
<script>
function doToggle(num) {
var target = $('div.target' + num);
target.toggle();
$('.target').not(target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none' : '')
}
$('#clicks .click').click(function () {
var num = $(this).data('target');
doToggle(num);
});
function handleHash() {
doToggle("." + location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
</script>
Thank you a lot.
ps: in the fiddle I only put the second script part because of some issues when I put the other part aswell. If you test it local you should use the whole JavaScript/jQuery part.

Since the URL is changing, you need to put doToggle(..) in the main section of your code.
Another problem is the data-target. jQuery may evaluate the number as a number. So .1 will become 0.1. We can add the . in JS.
<div id="clicks">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
and the JavaScript:
function doToggle(num) {
var target = $('div.target' + num);
target.toggle();
$('.target').not(target).hide();
$('#text').css('display', $('div.target:visible').length ? 'none' : '')
}
$('#clicks .click').click(function () {
var num = '.' + $(this).data('target');
if (num === '.' + location.hash.substring(1)) {
doToggle(num);
}
});
function handleHash() {
doToggle("." + location.hash.substring(1));
}
if (location.hash.substring(1).length > 0) {
doToggle('.' + location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
Edited:
In you script before, doToggle was working, but after it executed, the url would change, making it look like doToggle wasn't working. The click handler should only perform the toggle if the hash url is the same as the toggled div.
http://jsfiddle.net/449r8Lwv/12/

I'd suggest to remove dots in your data-target attribute.
So, your HTML will look like this:
1
2
3
<br><br><br>
<div id="clicks">
<a class="click" id="showInfo" data-target="1"><button>1</button></a>
<a class="click" id="showDataInput" data-target="2"><button>2</button></a>
<a class="click" id="showHistory" data-target="3"><button>3</button></a>
</div>
<div class="1 target" style="display: none;"><a name="1">1</a></div>
<div class="2 target" style="display: none;"><a name="1">2</a></div>
<div class="3 target" style="display: none;"><a name="1">3</a></div>
<div id="text">"I WANT THIS DIV GONE EVERYTIME I LET DIV 1, 2 OR 3 SHOW BY CLICKING THE BUTTONS. BUT SHOW UP AGAIN WHEN 1, 2 OR 3 IS NOT SHOWING/SELECTED"</div>
And you can try it here.

Change
$('#clicks .click')
To
$('#clicks.click')
This should solve your problem.
So remove the space in your selector
example: jsfiddle

There is flaw in your code thats why it requires two click to show the div.
Flaw: when user clicks on a link/button say "1" first time both your click and onhashchange handler is getting fired one after another. i.e clickHandler is first display the div 1 which is again gets hidden by your onhashchange handler call.
Next time when you click on same link 'No hashchange will occur' and hence only click handler is getting fired which in turn display the div correctly.
Solution: I suggest you should only use click handler because of the nature of your requirement. Or if it doesn't fit your requirement, you can set global variable to track if one of the event is fired and check its value before calling doToggle in your hashchangehandler.

Selecting a div unselects the other divs like a radio button?

I have created a list of divs using a loop from the database..
when i click select..it becomes like
the problem i am facing is that at a time i can select only one company...how could i select a nother company that will make the previous selected company unselect...
the program is like this...
{section name=i loop=$id7}
<div class="company" style="width:220px; height:220px; background-color:white;margin-left:12px;margin-bottom:22px;float:left;" >
<div id="ctable">
<table style="margin-top:20px;margin-left:18px;width:178px;height:149px;">
<tr style="text-align:center;">
<td colspan="2" align="center" valign="center" height="42px">{$id7[i].vCompanyName}</td>
</tr>
<tr>
<td colspan="2" align="center" valign="center" height="107px">
<img src="{$tconfig.tsite_images}{$id7[i].vImage}">
</td>
</tr>
</table>
</div>
<div id="selecty" class="{$id7[i].iEmployerId}" style="width:178px;height:32px; margin-left:18px;">
Select
</div>
<div id="selected_state" style="width:198px;height:32px;display:none;background-color:white;margin-left:16px;">
<img src="{$tconfig.tsite_images}tick.png" /> <font color="#cdcdcd"><b>Company selected</b></font>
</div>
</div>
{/section}
and its javascript is like this
<script>
function selecty_hide (eid,compid) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('selected_state').style.display="block";
document.getElementById('eid').value=eid;
}
</script>

Say you have a class(selected_company) for selected company div.
When someone choose any other div then get previous selected div and remove this class then add this class in current selected div.
Something like this:
$(".selected_company").removeClass('selected_company');
$(this).addClass('selected_company');
Then at a time only one company will be selected.
Here is an example demo: http://jsfiddle.net/kRD4S/

Well little modification in javscript can be done as below
<script>
function selecty_hide (eid,compid,element) {
alert(eid);
alert(compid);
document.getElementById('selecty').style.display="none";
document.getElementById('ctable').style.display="none";
document.getElementById('selected_state').style.display="none";
element.style.display="block";
document.getElementById('eid').value=eid;
}
need to pass another parameter during function call(3rd param) as 'this'
onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}',this)"
The script above will first display none all the div with id selecty,ctable,selected_state and this will display block the selected div.
Hope this Help you

If you can use jquery it is easy
<div class="mydiv" style="cursor: pointer;">
box 1
</div>
<div class="mydiv" style="cursor: pointer;">
box 2
</div>
<div class="mydiv" style="cursor: pointer;">
box 3
</div>
<script type="text/javascript">
$(".mydiv").click(function() {
if($(this).hasClass("selected") == false) {
$(".mydiv").removeClass("selected");
$(this).addClass("selected");
} else {
$(".mydiv").removeClass("selected");
}
});
</script>
This will remove the class "selected" from all elements with class "mydiv" and then add it to the single element you have clicked.
It also supports unselecting the current element + you can drop your buttons completely it is enough to click on the div!
You should be able to adjust my example to your code.
All you need to do now is define a custom class for the div that will display its content different like only show "company selected" when the div has the class "selected".
Have fun and good luck!

Think of it slightly different. If Company A is selected, and the user now selects Company B:
Unselect ALL elements.
Now select Company B
If you do it like this, there's no hassle in trying to figure out which company you need to unselect.
Something like this:
$(".company").click(function() {
//remember the new item
var clickedItem = $(this);
//unselect everything
$(".company").removeClass("companySelected");
//select the company that was clicked
clickedItem.addClass("companySelected");
});

Look, its simple, you can just solve your problem this way: Adding and removing CSS Classes.
I have made a full JSFiddle here to you know what i'm talking about.
Modified the HTML Company Div to be only one and not two divs:
<div id="selecty" class="selectable_state" onclick=select_unselect('{$id7[i].iEmployerId}','{$smarty.section.i.index}') >
Select
</div>
And modified the js:
function select_unselect(eid,compid){
alert(eid);
alert(compid);
if ($(this).hasClass('selectable_state'))
{
$(this).removeClass('selectable_state');
$(this).addClass('selected_state');
$(this).html('Company Selected');
$('#eid').val(eid);
}else{
$(this).removeClass('selected_state');
$(this).addClass('selectable_state');
$(this).html('Select');
$('#eid').val('');
}
}
Ps: please note that in the fiddle i removed some parameters of the function to make it work because i do not have all the data to make it work properly.