I need some help:
<button">Text</button>
<div class="show-on-button-click">Content</div>
<button">Text2</button>
<div class="show-on-button-click">Content2</div>
<button">Text3</button>
<div class="show-on-button-click">Content3</div>
I´de like to show content when the user clicks on the button. But it wont work, even all divs are shown, or it doesnt open and only the buttons are shown.
THX
You have to use some JavaScript/Jquery ;-
$(document).ready(function(){
$("button").click(function(){
$(".show-on-button-click").toggle();
});
});
Hope you solve it !!
Related
here is my div code and my file type is .php
these are div elements that I want to hide.
i use different methods with id and class also with javascript but my issue is not resolved
<div class="qamar-container">
<div class="content-section">
<h1>AB & MIB Traders</h1>
</div>
<div class="button-section">
<button>AB</button>
<button>ABC</button>
</div>
</div>
</div>```
if need any other information please tell me.
here are the steps by which my issue is resolved.
CSS Styles
display:none;
}
javascript
jQuery('#qamar-ab').on('click', function(event) {
jQuery('#ab').toggle('show');
jQuery('#qamar').toggle('hide');
});
});
I currently have a div with some information in it. See the example below:
<div class="verstuurd" onclick="alert('clicked!');">
<div class="titel"><span>Title</span><img src="imageurl"/></div>
<div class="image"><img src="imageurl"/></div>
<div class="tekst"><p>some text</p></div>
<div class="hover">
VISIBLE TEXT
</div>
<div class="delen">
VISIBLE AFTER HOVER
</div>
</div>
</div>
The :hover function works perfectly and the "delen" part is shown and the "hover" part is hidden. I only got a problem on mobile devices. If I scroll down the page on a mobile device and I touch the div, the hover will be triggered.
The answer I am looking for is; how am I able to use :hover on PC's and some sort of click event on mobile devices? So that I have to click in order to change the content and a second click will trigger the onclick of the div.
As an example of my inspiration see the website.
If you hover an item it will show the heart icons. PC uses this with hover and mobile needs a click to be shown. Unfortunately I can't find the source code which triggers this.
Are you talking about, you want an onClick="theFunctionNameToBeCalled()" fired when a div is touched (specifically on a mobile device?)
if you want that, you can use
$( "#divIdToBeTouced" ).click(function() {
//do something with a function here
});
or you could use plain ol' JavaScript to do the task.
<!DOCTYPE html>
<html>
<head>
<title>Coty's Title</title>
</head>
<body>
<div id="divIdToBeTouched" onmouseover="theFunctionToBeCalled()" onClick="theFunctionToBeCalled()">
I'm a div
</div>
<script>
var i = 0;
function theFunctionToBeCalled(){
i++;
if(i == 2) {
//do what you wanted once the onClick event was fired
alert("i == 2");
//now make sure to reset the flag that was made so it will work next time
i = 0;
}
else {
//change the content
alert("i == 1");
}
//do something interesting here if you want to
}
</script>
</body>
</html>
paste that code on this page http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default? and you can try it out on a browser computer
and try it on a mobile device and it should work
I tested it
Now make the hover event also call this function and it'll cover both evens
Extra info:
I've heard arguments with two possible paths to go from here and some say one way is "dangerous", I'll list the sides below If you wanted to know...
cont'd
the other argument is there needs to be an event listener added instead of a direct function call
This seems more safe. I think because it can help hide the function call its self..? I'm not sure.
Hope this helps
I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it).
The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.
Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.
Add this in your html head tag:
<script type="text/javascript>
function showElement(){
// get a reference to your element, or it's container
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
Now add a click event on the element you want to use to show your hidden content:
<img id="imageId" onclick="showElement()" src="..."/>
If you want to hide your "hidden" element by default, add a inline style:
<div id="elementId" style="display:none">...your buttons here...</div>
Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.
Edited to improve the answer:
Create an HTML structure like the following:
<div>
<img id="imageId" alt="" src="..." onclick="showElement()">
<div id="elementId" style="display:none">
<!-- your buttons, anchors or anything else you want to be hidden by default-->
</div>
</div>
So, when you click the image, the buttons appear and the image disappear.
Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:
<script type="text/javascript">
function showElement(){
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:
<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>
(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.
i need some help to make a button for enable or disable 2 div with jquery. i have 2 kind of navigation code in my page. these are my codes:
First:
<div class="nextprev">
[prev-link]Previous[/prev-link]
[next-link]Next[/next-link]
</div>
Second:
<div id="page_navigation1" class="page_navigation1">[next-link]Next[/next-link]</div>
Now, i need some jquery code for enable or disable these div's. for example, when we click on enable button just first div will be working and when we click on disable, just second div will be working!
i hope u guys undrstand my question and im sorry for my bad english.
the toggle() function toggles the visibility of a div. so maybe something like this?
http://jsfiddle.net/UvWEu/17/
<script type="text/javascript">
function toggleDivs() {
$("#nav1").toggle();
$("#nav2").toggle();
}
</script>
<div id="nav1"
style="background-color:red;width:50px;height:50px;display:none;">nav1
</div>
<div id="nav2"
style="background-color:green;width:50px; height:50px;display:visible;">nav2
</div>
<button text="toggle" style="width:50px; height=18px" onclick="toggleDivs();" />
There are two links in html document, which i want to open with in same page(not window) but one link content should appear at a time?
<body>
Numbers
Data
<div id="show"> </div>
</body>
Using jQuery it becomes as simple as using one method called load.. to make it elegant first add class to your links, e.g.
<a class="loader" href="numbers.html">Numbers</a>
<a class="loader" href="data.html">Data</a>
Then include jQuery and have such code to achieve what you need:
$(document).ready(function() {
$(".loader").each(function(index) {
$(this).click(function() {
$("#show").load($(this).attr("href"));
return false;
});
});
});
This will load the HTML contents into the show div, replacing any previous contents.
what about you have an event on each link to switch between two divs, hide one and show the other. so it could be:
<div onclick="Show(numbers.html)"> Numbers</div>
<div onclick="Show(data.html)"> Data</div>
and in Show() JS function you have and show the wanted div.