We Keep Coding

Toggle button - show / hide information

Can someone help me hide / show the information when I click on the icon (arrow). I tried to use javascript, although it is not the best way, but it also didn't work.
I intend that by clicking on the image https://img.icons8.com/android/24/000000/down.png, the information below will be hidden and that image will change to the image of the upward facing arrow https://img.icons8.com/android/24/000000/up.png
When you click on the up-facing sta the information appears again and that same image is replaced by the downward-facing arrow image.
Can someone help me?
DEMO - STACKBLITZ
CODE
<div *ngFor="let item of data">
<div class="d-flex flex-row"
style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
<div>
<img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
</div>
<div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
</div>
</div>
<div class="d-flex flex-row"
style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
<div class="">
<img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
</div>
<div>
<span style="margin-left: 8px;">#{{item.name}}</span>
<div>{{item.date}}</div>
</div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
</div>
</div>
</div>

First of all, remove your styles for hide1 class. It's better to rely on *ngIf directive in Angular:
<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
Then implement method to toggling shown property:
toggle(item) {
item.shown = !item.shown;
}
Now you have to bind this method to DOM event on div wrapping your arrows:
<div (click)="toggle(item)">
</div>
And final step is to use *ngIf directive on other element you want to toggling:
<div class="d-flex flex-row" *ngIf="item.shown" ...

HTML5 introduced a <summary> and <details> tag to allow you to toggle information.
Here's an example:
<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>

Change Text on another Div

Good evening Community,
I have a problem with my code.
HTML:
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
I want if I hover over the div "mbubble" that the class "thome" will change it's text. I tried to do that by making them visible / invisible.
CSS:
#mbubble:hover ~ .thome { visibility:hidden; }
#mbubble:hover ~ .tabout { visibility:visible; }
But it's sowhing no affect?
Can you tell me how you would do that? Or at least any way that's working to change the text by hovering?
Best regards,
Michael

How about this:
$('#mbubble').hover(function () {
$('.thome').html('<p style="letter-spacing:10;">NOW IT IS DIFFERENT</p>');
})

If your structure is really that simple, then a trick with pointer-events could work:
the idea is to kill pointer-events on a and reactivate it only on #mbubble, since when you hover a child, parent is hovered too, the selector can be taken from the parent .
a {pointer-events:none; }
#mbubble {pointer-events:auto;}
a:hover + #title .thome , .tabout {display:none;}
a:hover + #title .tabout {display:block;}
<a href="aboutme.php">
<div class='aboutus'>i don't trigger anything
<div id="mbubble">
I DO
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
Now, if you realize that without pointer-events but only a;hover it works , you may understand it can be usefull only if there is other content in <a> that should not react . only clicking on #mbubble will fire the link.Was your example too little ? if not, just use a:hover
http://caniuse.com/#search=pointer-events

It look doable in css, anyway, while not recommmended, there is a quick inline solution in javascript using the transversal DOM, like this:
You got to keep in mind that it can have strange behaviors, non easily copiable by right clicking, this is why inline javascripts should not be used directly. There is workaround around it, good luck.
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="document.getElementById('title').children[0].children[0].textContent='Enter the void!'" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
So a more nicer way is to use a function like this:
<a href="aboutme.php">
<div class='aboutus'>
<div onmouseover="changeText()" id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome"><p style="letter-spacing:10;">Text BEFORE</p></div>
<div class="tabout"><p style="letter-spacing:10;">Text AFTER</p></div>
<script>
function changeText() {
document.getElementById('title').children[0].children[0].textContent='Enter the void!'
}
</script>
Still, this isn't clean enough, the good way in javascript is to add an event listener, like this:
-
<a href="aboutme.php">
<div class='aboutus'>
<div id="mbubble">
stuff inside here
</div>
</div>
</a>
<div id='title'>
<div class="thome">
<p style="letter-spacing:10;">Text BEFORE</p>
</div>
<div class="tabout">
<p style="letter-spacing:10;">Text AFTER</p>
</div>
<script>
var toBeWatched = document.getElementById('mbubble');
toBeWatched.addEventListener("mouseover", function(event) {document.getElementById('title').children[0].children[0].textContent
= 'Enter the void!';setTimeout(function() { document.getElementById('title').children[0].children[0].textContent
= 'Text BEFORE!!!';
}, 2500);
}, false);
</script>
This way the html part is left untouched. (..)

JavaScript/jQuery guidance needed

Today I am building my self a vertical navigation menu and I'm wondering how I would go about build a particular feature I was thinking of.
Here is the coding behind my buttons:
html:
<div class="button"><a href="#">
<img src="../images/article.png" />
<p>Articles</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/leaderboards.png" />
<p>Leaderboards</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/events.png" />
<p>Events</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/search.png" />
<p>Search</p></a>
</div>
<div class="button"><a href="#">
<img src="../images/other.png" />
<p>Other/Tools</p></a>
</div>
css:
.button{
border-left:10px solid #e5dad6;
padding-left:5px;
margin-bottom:20px;
width:120px;
height:120px;
text-align:center;
}
My Goal:
Now my goal is to change the image of the relevant buttons when a user hovers over the whole div (button div), now of course I can do this by adding a hover state in css, but that's not what I want to do, because I don't want to just change that particular div.
What I want:
I want it so I can basically say = if .button is being hovered over, then change the img src of something else on the page, NOT change something related to the element being hovered over.

Do something like this with jQuery:
$(document).ready(function() {
var oldSrc = $('.myNewImage').attr('src');
$('.button').hover(function() {
//on hover of your element
$('.myNewImage').attr('src','http://mynewimagesrc.com');
}, function() {
//when the cursor leaves your element
$('.myNewImage').attr('src', oldSrc);
});
});
You'll have to switch out the .myNewImage, class for the actual class of the image on your page but that should work for what you're asking. It also assigned the original source of your image so that you can always return the element back to it.

you may want to check .hover() for jQuery

You can do what you want really easy with jquery.
<div class="button" id="article_button"><a href="#">
<img src="../images/article.png"/>
<p>Articles</p></a>
</div>
$('.button').on('hover', function(){
$('#some_other_element').data('oldimg', $('#some_other_element').attr('src')).attr('src','other_image.jpg');
}, function(){
$('#some_other_element').attr('src', $('#some_other_element').data('oldimg'));
});

How to link a complete DIV container?

i have the following div Container (including a background image).
<div class="haus"></div>
how can i link this DIV to an url?

use the <a> tag :
<a href="">
<div class="haus"></div>
</a>

Pretty Easy , like this :
<a href="htps://www.google.com">
<div class="haus">
This is div
</div>
</a>
Working fiddle : http://jsfiddle.net/xhGud/4/

Use this if you want to keep the next element in the same line
<a href="htps://www.google.com">
<div class="haus" style='display:inline-block'>
text
</div>
</a>
or just
<a href="htps://www.google.com">
<div class="haus">
text
</div>
</a>
This is also fine withe some JS work
<div onClick="self.location.href='http://www.google.com'" class="haus"></div>

Surround the div with the a-link tag
<a href="#">
<div class="haus"></div>
</a>
Or you can use onClick
<div onClick="self.location.href='http://www.google.de'" class="haus"></div>
Or a "experimental" way is to add the div a <a> link and call it over jQuery:
<div class="haus">
link
</div>
jQuery Script:
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});

I would do it the other way around. by making the a to take all the div space. Live Fiddle
That way, it will validate under any doctype.
personally I think it's clearer that way. but, its debatable.
HTML:
<div class="haus">
This is link in the div
</div>
CSS:
.haus
{
background-color: azure;
height: 50px;
}
.haus a
{
display: inline-block;
width: 100%;
height: 100%;
}

using z-index in correct way

I want to create a simple slider like the one I ve shown in the pic.. I have two divs wrapper 1 and wrapper2 separated by a margin of 20px,
I have a button in wrapper 1 clicking on which a new div should come down sliding which should come in front of wrapper 1 and 2,
The code that Ive used is
<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
<div id="tab1">
</div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>
and the script looks like
$(document).ready(function()
{
$("#slider").css({"display":"none"});
$(".clickMe").click(function()
{
$("#slider").slideDown("slow");
}
);
});
With this code, what I get is the slider window comes sliding down by pushing wrapper2 downwards instead of coming in front.what could be the issue?

I've put a fiddle together.
Here is the relevant code:
HTML
<div id="wrapper1">
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!</a>
<div class="slider">
</div>
</div>
<div class="clickMeWrapper">
<a class="clickMe" id="tab1" href="#">Click Me!
</a>
<div class="slider">
</div>
</div>
</div>
<div id="wrapper2">
</div>​
jQuery
$(document).ready(function() {
$(".slider").hide();
$(".clickMeWrapper").click(function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$(this).children(".slider").slideToggle("slow");
});
});​
If something's not clear, please let me know.

I think you should add position:absolute; to "slider", and set its position.

You have to put your slider outside the wrapper elements otherwise the parent child relationship overrides some formatting rules like z-index. position:absolute and other css attributes should be set by jQuery automatically.

You need an absolute position for z-index to work.