I am trying to resize a div when a user decides to hide (or show) particular content. For example, I have a contents page (https://jsfiddle.net/4b1g5jp9/1/), when a user clicks hide, I want the div to resize accordingly, hiding all contents except the actual Contents title.
Also, the 'Show' link should only show if the content is actually hidden and vice versa.
I have tried to adapt some JS based on a similar issue I found online and tried the following approach:
<script language="javascript">
function toggle() {
var ele = document.getElementById("contents-list");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
But the above achieves nothing. Any advice/solution would be appreciated.
By using the event's target we can determine what to show/hide.
If we do it that way, we can use this multiple times on a single page without it messing with each other.
Also, I've used toggle() which basically does the if() you had in your code statement for you.
https://jsfiddle.net/jkrielaars/qhb8ccob/1/
$(document).ready(function() {
$('.toggle').click( function(event) {
$(event.target).parents('.contents-list').find('ul').toggle();
var newText = $(event.target).text() === '[Hide]' ? '[Show]' : '[Hide]';
$(event.target).text(newText);
});
});
.contents-list{
width: 300px;
background-color: #f4f6f9;
padding: 15px;
border: 1px solid #b3b4b5;
}
.contents-list ul{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 14px;
}
#contents-list ul li{
text-decoration: none;
}
.contents-list ul li a{
padding-bottom: 2px;
text-decoration: none;
}
.contents-list a:visited {
text-decoration: none; color:blue;
}
.contents-list ul li a:hover{
text-decoration: underline;
}
.centerContents{
text-align: center;
}
.toggle{
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
Use that structure as your HTML:
<div id="contents-list">
<ul>
<li id="centerContents"><b> Contents </b>
<a class="hideLinks" href="#">[Hide]</a>
<a class="showLinks" href="#">[Show]</a>
</li>
</ul>
<ul class="submenu">
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
Using jQuery:
<script type="text/javascript">
$("#contents-list ul li a.hideLinks").click(function(){
$("ul.submenu").css("display", "none");
});
$("#contents-list ul li a.showLinks").click(function(){
$("ul.submenu").css("display", "block");
});
</script>
Your jQuery script should be right after the HTML, or near the </body> tag. And make sure to call jQuery cdn inside head tag: <script src="jquery-3.0.0.min.js" type="text/javascript"></script>.
NOTE: You can use Show() and Hide() functions instead of css display properties. You can read more about those functions Here.
Related
I have a link and div within each of my list items. If the link HAS an href then I want to make sure the div is hidden within its list item and the link appear just normal.
However if the link DOES NOT have a href (e.g. href=""), then I want to add the class .show to the div so I can show it. I also want to hide the link at the same time.
Or is there a better way to do this? Thanks
<style>
.nolinkdiv { display:none; }
.show { display:block!important; }
</style>
<ul>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
<li>
Register
<div class="nolinkdiv">Register Coming Soon</div>
</li>
</ul>
You don't need JavaScript for this:
.nolinkdiv { display:none; }
ul li a[href=""] {
display: none;
}
ul li a[href=""] + div {
display: block;
}
This is actually the proper way of doing it to hide via CSS only:
ul li a {
display: none;
}
ul li a[href^="https:"],
ul li a[href^="http:"] {
display: block; //This can be anything else rather than block, such as grid etc.
}
$( document ).ready(function() {
$('ul li').each(function(idx, li) {
var LI = $(this);
var hrefValue = LI.find("a").attr('href');
if(hrefValue) {
LI.find("div").hide()
} else {
LI.find("a").hide()
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
<li>
Register
<div class="">Register Coming Soon</div>
</li>
</ul>
Been made aware you cant swap classes unless its a sibling. so instead of putting the class in a new div im trying to put it into the same list but give it a class to hide, then be visible when another li is hovered.
http://jsfiddle.net/e79g4p1p/13/
<div class="bodyfooter_block bbshadowb">
<p class="typotitle_sml"><?php echo $var_furtherinfotitle; ?></p>
<p class="typosubtitle_sml"><?php echo $var_furtherinfoheading; ?></p>
<p class="typotext" style="padding-top:16px;">
<ul class="blocklist">
<li>text hidden</li>
<li>text</li>
<li>yugiugugu</li>
<li>ugiugguiug</li>
<li>ygguiguig</li>
<li>uihoihoihoih</li>
<li>uhgiuhiuhuh</li>
<p>po</p>
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
</p>
</div>
css
.hover_text1 {
}
.bodyfooter_text1 {
list-style-type: none;
visibility: hidden;
}
.hover_text1:hover > #bodyfooter_text1 {
list-style-type: none;
width:260px;
height:102px;
background: #222222;
color: #CCCCCC;
padding:12px;
padding-top:6px;
border-radius: 6px;
visibility: visible;
}
Tried with js but doesnt work:
$("#hover_text1").hover(function() {
$(".bodyfooter_text1").addClass("bodyfooter_text1_hover");
});
http://jsfiddle.net/e79g4p1p/23/
I strongly suggest you go over the basics of CSS once again.
The problem you face can be overcome using pure CSS - we need a selector called the General Sibling Combinator:
CSS
.hover_text1:hover ~ #bodyfooter_text1 {
display: block;
}
This, however, requires you to restructure your markup by a marginal amount, so the "preceded by element" rule works correctly - the selector we use requires both the preceding and the targeted element to share the same parent:
HTML
<ul class="blocklist">
<li class="hover_text1">text hidden</li>
<li>text</li>
<!-- ... -->
<li class="bodyfooter_text1" id="bodyfooter_text1">hidden</li>
</ul>
Working example on JSFiddle.
The fiddle I've linked is a very simplified version of your code, modified only to highlight the selectors working and nothing else.
i am making an information website for a school assignment, i want to have a button/s to make different information display on the page. how do i go about doing this in HTML or other applicable languages, Thanks
Use JavaScript!
<body>
<input id="button1" type="button" value="click me">
<input id="button2" type="button" value="click me, too">
<p id="output"></p>
<script>
/* Get references to your elements. */
var button1=document.getElementById("button1");
var button2=document.getElementById("button2");
var output=document.getElementById("output");
/* Add click event listeners to your buttons so you can interact with them. */
button1.addEventListener("click",clickButton1);
button2.addEventListener("click",clickButton2);
/* Write functions to handle displaying various content depending on which button you press. */
function clickButton1(event_){
output.innerHTML="You clicked button1!";
}
function clickButton2(event_){
output.innerHTML="You clicked button2!";
}
</script>
</body>
Basically, your click event listeners handle what to display when a button is pressed. I'm just changing the text in a p element, but you could do a lot more than that. For example, store the different html you want to display in hidden divs and only display them when a button is pressed. Hope this helps!
I believe you could do this in CSS as well, the big thing to note in the example is that each <a> has the #(id of div) in the href attribute. Since I don't know the exact context for your predicament, I can't say this would work how you want it to, but I just really dislike using javascript if I don't have to.
.container > div {
display: none
}
.container > div:target {
display: block;
}
ul.nav {
list-style-type: none;
}
ul li {
display: inline-block;
width: 100px;
}
ul li button {
border: 1px solid grey;
border-radius: 2px;
padding-left: 5px;
box-sizing: padding-box;
}
<ul class="nav">
<li>
<button>Tab 1
</button>
</li>
<li>
<button>Tab 2
</button>
</li>
<li>
<button>Tab 3
</button>
</li>
<li>
<button>Tab 4
</button>
</li>
<li>
<button>Tab 5
</button>
</li>
</ul>
<div class="container">
<div id="firstTab">Hello Tab 1</div>
<div id="secondTab">Hello Tab 2</div>
<div id="thirdTab">Hello Tab 3</div>
<div id="fourthTab">Hello Tab 4</div>
<div id="fifthTab">Hello Fifth Tab</div>
</div>
I want to show drop down menu on mouseover. Now I am using 2 divs and use slideup to show another div for sub menu; I want to show sub menu using 1 div on mouseover. How can I do that?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
});
$("#flip").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
}
#panel {
padding: 1px;
text-align: left;
border: solid 1px #c3c3c3;
padding: 5px;
display: none;
}
</style>
</head>
<body>
<div id="flip">
<ul>Home</ul>
</div>
<div id="panel">
<ul>Sub
</br>
Sub
</br>
Sub
<ul>
</div>
</body>
</html>
`
A nested unordered list would work, something like this:
<ul id="flip">
<li>Home
<ul id="panel">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
</ul>
In CSS, all you would need is to hide your sub-menu:
#panel {
display:none;
}
jQuery is the same as you had it.
See here: http://jsfiddle.net/kaizora/23uuL/
PS: If you are using a <ul> tag, in valid HTML, there should be nothing else but <li> tags inside.
How about this:
$("#flip").mouseover(function () {
$("#panel").slideDown("slow");
$("#panel").mouseleave(function () {
$("#panel").slideUp("slow");
});
});
Fiddle Here: http://jsfiddle.net/vWGsC/
If you want to you cold also use pure CSS.
<ul class="nav">
<li class="dropdown">
Home
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li class="dropdown">
second dropdown
<ul>
<li>...</li>
</ul>
</li>
</ul>
</li>
This would be the html from something I have saved some time ago.
Try it out! :)
http://jsfiddle.net/patrickhaede/dqxm4/
DEMO Background color is for clearly view for user.
var temp = $('#flip ul li:eq(0)').nextAll();
temp.hide();
$('#flip ul').mouseenter(function(event) {
temp.slideDown("slow");
});
$('#flip ul').mouseleave(function() {
temp.slideUp("slow");
});
#flip li , #flip ul { list-style-type: none; background-color: yellow;}
Home
Sub
Sub
Sub
I need to make linkable an entire <li> or <tr> element, someone suggest me to use javascript, with an onclick action.
function doNav(url)
{
document.location.href = url;
}
This do the job, the problem is that, in this way is impossible for the user, understand what url is going to. How to realize my need (completly clickable elements) without changing browser behaviour?
You don't need javascript for this. Add this css
ul li a {
display: block;
padding: 10px 20px;//more or less, to suit your needs
text-decoration: none;
}
This will make the entire <li> containing an anchor clickable
<li class="block">Text</li>
That lets you see the target. And then:
.block{
display:block;
text-decoration:none; //just so it isn't underlined
}
in the CSS will take care of the "whole thing needs to be clickable" problem.
HTML
<ul class="menu">
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
<li class="anchors" title="click me I am a link" > link 1 </li>
</ul>
CSS:
ul li.anchors{
text-decoration:underline;
color:blue;
list-style-type:none;
display: inline-block;
margin:2px 4px;
padding: 2px 4px;
}
ul li.anchors:hover{
color:navy;
cursor:pointer;
}
better way may be like this: http://jsfiddle.net/iamanubhavsaini/Cv2FM/1/
here, use content property and data- attribute to tell user before hand as what they are going to click on.