My question is how can I create expandable panels in an HTML form without using javascript, so that when a user clicks on each panel it expands and displays the form.
Before click:
<ul>
<li id="panel1"><a></a><div class="content"></div></li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
After click:
<ul>
<li id="panel1">
<a></a>
<div class="content">
<form id="FORM"> ..... </form>
</div>
</li>
<li id="panel2"><a></a><div class="content"></div></li>
<li id="panel3"><a></a><div class="content"></div></li>
</ul>
You can do that using :target css pseudo selector - it is not very elegant though, as clicking on the anchor tag modifies the url so it is hard to toggle the form. Best use javascript.
<style>
form {
display: none;
}
form:target {
display: block;
background: red;
}
</style>
<ul>
<li id="panel1" ><div class="content">Show form<form id="form" > My form <input type="text"></form></div></li>
<li id="panel2"><div class="content">My content</div></li>
<li id="panel3"><div class="content">My content</div></li>
</ul>
some examples of :target in action:
http://css-tricks.com/css-target-for-off-screen-designs/ and http://css-tricks.com/on-target/
Without using ANY javascript at all, you can't.
Unless you just put links and redirect your users to a page with the expanded content every time.
Or unless you write some kind of complex CSS using the :hover pseudo-selector and not the click event.
CSS 3 has a :target pseudo-selector that might help. Here is an example: https://tinker.io/1756b
Related
So I am trying to create a dropdown menu with jquery and have a div (the dropdown) with display: none. I am trying to fire the jquery toggle when an li item in the above nav bar is clicked. If anyone could take a look at this code and see if there are any obvious errors, that would be great.
Thanks
PS The php code is present as I am working with WP
<ul class="right-nav">
<li style="padding-left: 10px; cursor: pointer;" id="current-user">
<?php $current_user = wp_get_current_user(); echo $current_user->user_login; ?>
</li>
</ul>
The dropdown menu:
<div class="dropdown-wrapper">
<div id="user-menu" class="user-menu">
<ul>
<li>Hello</li>
</ul>
</div>
.user-menu {
display: none;
}
And then the jQuery event itself:
$(document).ready(function() {
$('#current-user').click(function() {
$('#user-menu').slideToggle("fast");
});
});
Man... I guess I kinda got it. Remove the CSS:
.user-menu {
display: none;
}
And instead, in teh document's ready, give this:
$(".user-menu").hide();
Trust me, this makes a difference. The reason is, the jQuery first checks if the style="display: none;" is there or not in the element, as it is not there, because it is given by the CSS, it gives another display: none inline style. This doesn't make any difference. But third time click will reveal it. Give it a try.
Use tag to show/hide div when click when JavaScript is disabled. Tried adjusting following example Show hide divs on click in HTML and CSS without jQuery but that doesn't seem to work.
From this question How to detect if JavaScript is disabled? i assumed that there isn't a convenient way to check if JS is disabled like:
if(JS is disabled){
// show <a> tag that words with jQuery to display div
} else {
// show label to show/hide div onclick
}
Any ideas will be welcomed.
Question How to make "a" tag to show a mini login form stored in "div" when JavaScript is disabled. Because when it's enabled it ?
Below is coresponding code of tag "a" and "div".
<ul class="nav nav-bar pull-right" >
<li class="dropdown" id="menuLogin">
<a class="dropdown-toggle" href="#" for="_1" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
<?php
$form_sm = $this->form_sm;
$form_sm->prepare();
echo $this->form()->openTag($form_sm);
?>
<dl class="form">
<dd><?php
echo $this->formElement($form_sm->get('email'));
echo $this->formElementErrors($form_sm->get('email'));
?></dd>
<dd><?php
echo $this->formElement($form_sm->get('password'));
echo $this->formElementErrors($form_sm->get('password'));
?></dd>
<li class="divider" style="width:78%"></li>
<dd><?php
echo $this->formElement($form_sm->get('send'));
echo $this->formElementErrors($form_sm->get('send'));
?></dd>
<?php echo $this->form()->closeTag() ?>
</div>
</li>
</ul>
It uses a Bootstrap3 and Zend Framework components and by clicking "a" tag following line
<li class="dropdown" id="menuLogin">
change to
<li class="dropdown open" id="menuLogin">
You can use checkbox hack to do it. Since it is pure CSS there are some limitations. The elements you want to hide have to be siblings or children of the label you will use so you can select them when you get the :checked status. You can't go up to a element's parent in CSS.
Here is an example: http://jsfiddle.net/carloscalla/msaccf9w/
HTML:
<label class="hide_action" for="chk1">Action toggle</label>
<input id="chk1" type="checkbox" />
<div>Sibling div</div>
CSS:
.hide_action{
display:block;
background-color: yellow;
}
.hide_action + input{ /* or #chk1 */
display:none;
}
.hide_action + input + *{ /* or #chk1 (selector for what you want to hide) */
display:none;
}
.hide_action + input:checked + *{ /* or #chk1:checked (selector for what you want to hide) */
display:block;
}
You can not go up a parent and hide other element since you won't be able to get a selector for it. You can go down in children or siblings.
In this example I use + input to select the adyacent input to the label if you don't want them to be together you can identify it by an id as in the CSS comments.
How to convert this :
<ul class="ulStyle">
<li class="liStyle">
<div class="first">
<div class="second">
menu1
</div>
</div>
</li>
</ul>
to wp_nav_menu
Too many div and class inside there, anyone can help me solve this problem?Thank you!
This can be accomplished using the nth-child() selector in css
see the codepen here
use this css:
.wp_nav_menu div:nth-child(1) {
background: blue;
}
.wp_nav_menu div:nth-child(2) {
background: red;
}
with the following markup:
<ul class="wp_nav_menu">
<li>
<div>
Foo
</div>
<div>
Bar
</div>
</li>
</ul>
As I see you are using a custom theme that have probably a Walker. In WordPress you can use a Walker to modify the HTML rendered by wp_nav_menu.
http://codex.wordpress.org/Function_Reference/Walker_Class
First, see if there is one, normally in theme/functions.php
Before starting with custom walkers, use the options before, after, link_before, link_after and items_wrap. See http://codex.wordpress.org/Function_Reference/wp_nav_menu
It will allow you to change the encapsulation of your menu items.
I need to display the all the contents of a username when the user Mouse over the usernames and the output should to be similar to a pop or a iframe.How to achieve this?
$('#previousIssuedDetail').live('mouseover', function() {
$(this).addClass('row_over');
});
but not able to display it
Could you please tell what exactly is the problem?
The easiest way to get it would be like this.
Define you html like this -
<dl class="user">
<dt class="username">Username</dt>
<dd class="userdetails>User Details</dd>
</dl>
Now, in the CSS file, you can write this -
.userdetails { display: none; }
.user:hover > .userdetails { display: block; }
You can also write a jquery script to get it done too.
Or, just customize the css this way, and you can do it without using jquery.
You need something like this ?
<div id="acc">Acc
<ul id="ulAcc">
<li>User</li>
<li>User 2</li>
<li>User 3</li>
</ul>
</div>
js
$("#acc").hover(function(){
$(this).children().stop(true,true).slideDown();
}, function(){
$(this).children().stop(true,true).slideUp();
});
Demo
Does anyone know how to edit/change Wordpress's wp_list_pages function in order to add classes to the ul and li items?
I'm trying to implement the new version of jquery.treeview which requires <li class="expandable"> and <ul style="display: none;"> on expandable lists and child ul's.
I've been messing around with this but it aint working too good in that it applies the 'expandable' class to all li's:
$pages = wp_list_pages('title_li=&echo=0' );
$pages = preg_replace('/class="/','class="expandable ', $pages); //note space on end of replacement string
//output
echo $pages;
And here is what the outputted html should look like:
<ul class="treeview" id="tree">
<li>Home</li>
<li class="expandable">Expand 1
<ul style="display: none;">
<li class="expandable">Expand 2_1
<ul style="display: none;">
<li>Expanded 3_1</li>
<li>Expanded 3_2</li>
<li>Expanded 3_3</li>
</ul>
</li>
<li class="expandable"><a href="#" >Expand 2_2</a>
<ul style="display: none;">
<li>Expanded 4_1</li>
<li>Expanded 4_2</li>
<li>Expanded 4_3</li>
</ul>
</li>
</ul>
Hope this makes sense and any help greatly appreciated, S.
I guess you are trying to activate a tree view on the page items. As this would require JavaScript you can simply add the class using JavaScript before initializing the tree view:
$("#tree li").addClass("expandable");
$("#tree").treeview();
If you also want to hide all ul elements you can use jQuery, too (not sure about the correct syntax):
$("#tree ul").hide();
Maybe this Plugin (Classy wp-List) helps. I haven't tried it yet but it says it will let you define a class for each page in the backend.
good luck.