Show Hide div with css only - javascript

I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.
<div class="span3">
<img src="an1.jpg" class="img-rounded" />
<h3>AN1<br />1234</h3>
</div>
<div class="span3">
<img src="an2.jpg" class="img-rounded" />
<h3>AN2<br />1234</h3>
</div>
<div class="span3">
<img src="an3.jpg" class="img-rounded" />
<h3>AN3<br />1234</h3>
</div>
<div class="span3">
<img src="an4.jpg" class="img-rounded" />
<h3>AN4<br />1234</h3>
</div>
Show div when div is click:
<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>

You can use a hidden input that can be toggled that corresponds to the label in the click area.
<div class="span3">
<label for="an1">
<img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>
Then in your CSS:
[type=checkbox] {
display: none;
}
:checked + div {
display: block !important;
}
I would also stear clear of style and just use the stylesheet.
http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/

In most browsers you should simply use the href attribute of the a elements and an id for the element to show:
Div one
Div two
Div three
Div four
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
Coupled with the CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
JS Fiddle demo.
In the HTML the wrapper div (#content) isn't necessary, it's simply to make it easier to specifically target those elements it contains (you could, of course, simply use a class instead).
To add hiding functionality (to hide all, rather than just hide the sibling divs when showing another), unfortunately requires a link to trigger a hash-change (in order to stop the :target selector matching the divs), which in turn requires a link (either in each of the divs to show or elsewhere in the document, either linking elswhere (as follows):
<ul id="andHideAgain">
<li>Div one</li>
<li>Div two</li>
<li>Div three</li>
<li>Div four</li>
</ul>
<div id="content">
<div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>
JS Fiddle demo (link in each div).
Or the simple use of just a hash:
Div one
Div two
Div three
Div four
hide
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
JS Fiddle demo (using a single a, and an 'empty' hash).

this is how i solve show hide problem with just
here is my div with its class declared
<div class='loading'> </div>
and here is the javascript that
$('.loading').hide();
and
$('.loading').css("display", "block");

Related

Hide 2 of the 3 item divs

I'm trying to hide 2 of the 3 item divs, the class name is item. I can usually use css display none, but they all have the same name, and its coming from WordPress plug in, and I believe its a template, so any changes made, it just replicates. Is there anyway I can add ID to each div which will automatically increment value by one, then I can use CSS display option?
<div class="related-post grid">
<div class="post-list">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
to
<div class="related-post grid">
<div class="post-list">
<div class="item" id="01">
</div>
<div class="item" id="02">
</div>
<div class="item" id="03">
</div>
</div>
</div>
You can use CSS pseudo classes to accomplish what you want:
.related-post .post-list .item:not(:last-child) {
display: none;
}
will hide any element with class item that is not the last element.
Or if you want to specifically target the first and second element:
.related-post .post-list .item:nth-child(1),
.related-post .post-list .item:nth-child(2)
{
display: none;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
In Javascript you could assign dynamically an id attribute to all the .item elements like so:
document.querySelectorAll('.item').forEach((i,n) => i.id = 'item_' + ++n);
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

link click works only once

i have hidden div that contain a div inside it and this div is hidden by default , and i have link should bring the content of (#mobiles_thumbs) div , every thing work perfectly just for first click on the link and the second click the div that change its content disappear i used (on) delegate . this is my code :
//and here my jquery code for handle the link click :
$('#products').on('click', 'a', function() {
$("#thumbs").html($("#thumbs_collection #mobiles_thumbs"));
/* here #thumbs_collection is the name of big div that contain six
div inside it.
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this is the hidden div -->
<div id="thumbs_collection">
<div id="mobiles_thumbs" style="visibility:hidden">
<img alt="mobile1" src="images/mobile1.jpg">
<img alt="mobile2" src="images/mobile2.jpg">
</div>
</div>
<div id="products" class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Our Products </h1>
</div>
<div class="col-sm-12">
<ul>
<li> Mobiles </li>
<li> Swatches </li>
<li> Chairs </li>
<li> Boxs </li>
<li> Doors </li>
<li> Windows </li>
</ul>
</div>
<div id="thumbs">
<!--this div for load the products -->
</div>
</div>
</div>
Try cloning the element fist and don't forget to toggle visibility after the html append
var temp = $("#thumbs_collection #mobiles_thumbs").clone();
$('#products').on('click', 'a', function() {
$("#thumbs").html(temp);
});

JQM Adding a button to collapsible header

The following JSFiddle gives the basic source code:
http://jsfiddle.net/vgDwj/6/
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h3>Sample</h3>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<div data-role="collapsible">
<h3>Title 1</h3>
<p>Item 1</p>
</div>
</li>
<li>
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Item 2</p>
</div>
</li>
</ul>
</div>
</div>
</body>
1)
What i want to do is along with the '+' sign to the left of each title, i want a button with 'X' sign (default JQM delete icon) on the extreme right also. But i am not able to add that 'X' sign. The 'X' sign will further be used to delete the item from the list.
2)
Underneath the 'Title 1' I have a <a> tag with the class as ui-btn ui-icon-delete.
Even then the delete icon is not appearin in this <a>.
Thanks
Regarding the second part of your question you need to enter it as follows,
The first part of your question can be achieved partially with css and completely with js.
First i suggest you get rid of the listview, as it does not render correctly containing collapsibles (noticed weird spacing at the sides of collapsibles when expanded). You can easily mimic the containers of a listview with few div elements and css.
If a button is added right after the declaration of each collapsible,
<div data-role="collapsible" class="my-collapsible">
No text
....
along with css that positions the delete button absolutely at the right of the header, then it is possible to achieve what you require partialy, since it only works when the collapsibles are expanded.
To make it work when the collapsibles are collapsed a little js is required.
A possible solution follows,
http://jsfiddle.net/7Xh9N/
html
-added div elements with class values container to mimic the white containers of listview. Note the first and last elements of your list have class value container first and container last respectively.
-added a No text to use along with css and make it absolutely positioned at the far right of the collapsible header.
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h3>Sample</h3>
</div>
<div data-role="content">
<!-- <ul data-role="listview" data-inset="true">
<li>-->
<div class="container-wrapper">
<div class="container first">
<div data-role="collapsible" class="my-collapsible">
No text
<h3>Title 1</h3>
<p>Item 1</p>
</div>
</div>
<!-- </li>-->
<div class="container">
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Item 2</p>
</div>
</div>
<!-- <li> -->
<div class="container last">
<div data-role="collapsible">
<h3>Title 2</h3>
<p>Item 2</p>
</div>
</div>
<!-- </li>
</ul> -->
</div>
</div>
</div>
</body>
css
-added styles for container div elements
-added styles for my-delete button, to be absolutely positioned to the far right of the header
.my-delete{
position:absolute;
top:0;
right:2px;
display:block !important;
z-index:10000;
}
.container .ui-collapsible{
position:relative;
}
.container-wrapper{
box-shadow: 0 1px 3px rgba(0,0,0,.15);
border-radius:5px;
}
.container{
background-color:white;
padding:4px;
border:1px solid #ddd;
}
.container.first{
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.container.last{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
js
-if the following code is run on pagecreate then the delete button will be also visible when the collapsibles are collapsed.
var $delButton = $('.my-delete').detach();
$('.my-collapsible').append($delButton);
http://jsfiddle.net/7Xh9N/1/
just add the class 'ui-btn-icon-left' to the element and you are good to go.
here is a working fiddle: http://jsfiddle.net/vgDwj/12/

Manipulating first child inside DIV as an UL element in jQuery

Currently I have the below HTML elements.
<div class="ow_box_empty ow_stdmargin clearfix">
<div id="avatar-console" class="ow_avatar_console ow_center">
<div style="height: 190px; background: url(7.jpg) no-repeat;>
<div style="display: none;" id="avatar-change">
Change Avatar
</div>
</div>
<div class="user_online_wrap">
<div class="ow_miniic_live"><span class="ow_live_on"></span></div>
</div>
</div>
</div>
I want to wrap the first DIV(inside DIV with id "avatar-console") with an LI tag and insert new LI tag at the end as shown below.
Below is the required ouput.
<div class="ow_box_empty ow_stdmargin clearfix">
<div id="avatar-console" class="ow_avatar_console ow_center">
<ul>
<li>
<div style="height: 190px; background: url(7.jpg) no-repeat">
<div style="display: none;" id="avatar-change">
Change Avatar
</div>
</div>
</li>
<li class="star">★</li>
</ul>
<div class="user_online_wrap">
<div class="ow_miniic_live"><span class="ow_live_on"></span></div>
</div>
</div>
</div>
I tried the below code to start with but it gives unwanted results. I am not sure where and how to start on this.
$("#avatar-console div:first-child").append('<li class="star">★</li>')
Fiddle Link: http://jsfiddle.net/Purus/U3KC8/
This should work:
http://jsfiddle.net/da4dz/
$("#avatar-console > div:first")
.wrap('<ul><li></li></ul>')
.closest('ul').append('<li class="star">star</li>');
You can use the jQuery wrap() method:
$("div:first-child", "#avatar-console").wrap("<ul><li></li></ul>");

JQuery Vertical Tabs - create additional link to tab

I'm using this script for jQuery Vertical Tabs.
http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu
<script language="JavaScript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").hover(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
Here's the HTML for the tabs (links)
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
I am trying to create an additional link from within a tabs content to another tab.
So this way I can link to the next tab or the last tab, keeping the same functionality as the current tab links (no refresh)
This is my first question on stackoverflow and I've searched far and wide.
I really appreciate all the help. This is a great community.
UPDATE:
Okay, Here is an edit with my full code:
<script type="text/javascript">
$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
var curMenu=$(this);
$(".tabs .tab[id^=tab_menu]").removeClass("selected");
curMenu.addClass("selected");
var index=curMenu.attr("id").split("tab_menu_")[1];
$(".curvedContainer .tabcontent").css("display","none");
$(".curvedContainer #tab_content_"+index).css("display","block");
});
});
</script>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_2">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_3">
<p>text</p>
</div>
<div class="tabcontent" id="tab_content_4"><h2 class="wwd_title">
<p>text</p>
</div>
</div>
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">Onefish</div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">Twofish</div>
</div>
<div class="tab" id="tab_menu_3">
<div class="link">Redfish</div>
</div>
<div class="tab last" id="tab_menu_4">
<div class="link">Bluefish</div>
</div>
</div>
In order to make links in the tab contents force the tabs to switch, it helps to understand what is happening under the hood to make them switch by default.
By default, mouseover events force the tabs to change; therefore, the solution is to override the default click event of the hyperlinks in question by binding an event to hyperlinks in the tab content:
Include this code after the JavaScript code you showed in your question, inside the $(document).ready:
$('.tabcontent').find('a').click(function() {
event.preventDefault();
$('.tabs #' + $(this).attr("rel")).mouseover();
});
The event.preventDefault() prevents the hyperlinks from attempting to redirect to the page entered in the href attribute, and the rel attribute is used as a way to bind the hyperlink to the specific tab being linked to.
The rel attribute is used to get the value of the id of the tab so we can programmatically invoke its mouseover event, and switch tabs.
<div class="tabscontainer">
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
<div class="tab" id="tab_menu_2">
<div class="link">CSS</div>
<div class="arrow"></div>
</div>
<div class="tab last" id="tab_menu_3">
<div class="link">JQuery</div>
<div class="arrow"></div>
</div>
</div>
<div class="curvedContainer">
<div class="tabcontent" id="tab_content_1" style="display:block">content for tab 1 tab2</div>
<div class="tabcontent" id="tab_content_2">content for tab 2</div>
<div class="tabcontent" id="tab_content_3">content for tab 3</div>
</div>
In the HTML content for your tab, simply include the hyperlink as you normally would, using an href="#" and a rel attribute. The rel attribute must equal the id of the target tab, in this case, tab_menu_2.
It Works as per your requirements
Just add
<div class="tabs">
<div class="tab selected first" id="tab_menu_1">
<div class="link">JavaScript</div>
<div class="arrow"></div>
</div>
</div>
in any of the tab
Go to this link http://jsfiddle.net/ipsjolly/ssR5f/
There is a similar tab in 3rd tab through which we can jump to 1st tab.

Categories