how to show content using toggle in jQuery - javascript

I made a simple demo in JQM. In this demo there is a lot of space that is occupied by buttons and a textfield.
So I tried to hide the content with the idea to show it when a button is clicked.
I want that content only to show on button click and hide and again when the user clicks the button. Given picture I need to toggle. Here is the content I need to toggle on button click:
<div data-role="header" data-theme="b" class="header">
<nav>
<ul>
<li class="new_h"><i class="new"></i>New
</li>
<li class="export_h"><i class="export "></i>Export
</li>
<li class="import_h"><i class="import "></i>Import
</li>
<div class="cb"></div>
</ul>
</nav>
</div>
<div data-role="content">
<article class="testsuitbox">
<h1>TestSuite Name</h1>
<input name="" type="text" class="txtfield" id="testSuiteId"/>
</article>
</div>

Well, if you need to "toggle" the content, simply use .toggle().
Docs: http://api.jquery.com/toggle/
Docs example:
HTML
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
jQuery
$( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
// Animation complete.
});
});

Related

How to show content from the specific div with javascript/jQuery

I want to show content from the specific div when the page loads. This is my code:
$(document).ready(function () {
$('.pbox:gt(0)').hide();
$('#buttons').on('click', 'a', function () {
$('.current').not($(this).closest('li').addClass('current')).removeClass('current');
$('.pbox:visible').hide(600);
$('.pbox[id=' + $(this).attr('data-id') + ']').show(600);
});
});
.current {
background-color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="buttons">
<li>
<a data-id="div1">One</a>
</li>
<li>
<a data-id="div2">Two</a>
</li>
<li>
<a data-id="div3">Three</a>
</li>
<li class="current">
<a data-id="div4">Four</a>
</li>
</ul>
<div class="pbox" id="div1">
Content 1
</div>
<div class="pbox" id="div2">
Content 2
</div>
<div class="pbox" id="div3">
Content 3
</div>
<div class="pbox" id="div4">
Content 4
</div>
As you can see by default am adding the current class to the element:
<li class="current">
<a data-id="div4">Four</a>
</li>
So what am trying to achieve is when the page loads show Content 4 as you can see right now it shows Content 1 when the page loads.
Can anybody try to help me with this?
If you need show content where link is active you can do it with code below
$.fn.pageLoad = function() {
const currentId = $('li.current>a').data('id');
$('.pbox:visible').hide(600);
$('.pbox[id=' + currentId + ']').show(600);
}
$('document').pageLoad();
Just make any load function which close all pboxes and find current li>a id and open it. Also you can add setTimeout if your content is loading slow.

Bind the listener to dynamic generate content in HTML

There is a dynamic generate page using jquery like this:
var html = "tab...button..datatable...etc...";
And I generate the page when click on a button
$("btn").on("click",function(){
$("body").append(html);
});
The problem is , all element from generated html does not have event listener, so for the click button /change event I use
$('body').on('change', '.gui-file', function (event) {
However, for the bootstrap element how can I bind the event to the generated element ? e.g. Tab?
Or are there any better way other than binding after generate the html content? Thanks
The tab:
<div class="tab-block mb10">
<ul class="nav nav-tabs nav-tabs-left tabs-border">
<li class="active">
English
</li>
<li class="">
繁體
</li>
<li class="">
简体
</li>
</ul>
<div class="tab-content">
<div id="tab1_1" class="tab-pane active">
</div>
<div id="tab1_2" class="tab-pane">
</div>
<div id="tab1_3" class="tab-pane">
</div>
</div>
Can you please init newly added tab by calling:
$("btn").on("click",function(){
$("body").append(html);
$(".nav-tabs").tab();
});

jquery accordion mouseover and mouseout on navigation of vertical menu

below is my code and i want when i mouse hover the Link CMT its div will open and when i mouse out its div closed. .....
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
contents of 1st
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">
contents of 2nd
</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">
contents of 3rd
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
contents of 4th
</div>
</li>
</ul>
</div>
Try this
$('h2').on('mouseenter', function () {
$(this).next().show();
}).on('mouseleave', function () {
$(this).next().hide();
});
DEMO
incase you want the want the content to be shown when you hover over that too you could do this
$('li').on('mouseenter', function () {
$(this).find('.content').show();
}).on('mouseleave', function () {
$(this).find('.content').hide();
});
DEMO
I've got a similar solution, but using hover() instead:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().css("display","block");
},function(){
$(this).next().css("display","none");
});
});
jsFiddle Demo
Actually, I like the .show() / .hide() methods better with this:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().show('fast');
},function(){
$(this).next().hide('fast');
});
});
jsFiddle Demo 2
Not to overdo this or anything, but came across a really interesting solution from another stackoverflow question here:
HOVERINTENT Plugin Solution
Last update though, I promise!

jQuery sliding panels - close one panel when opening another one/How to open one panel only?

I have three sliding panels in my html.
The thing is that panels overlay each other when open.
I would like to get a function that create an event when one panel (eg. #panel1) is open already and the user will click on the other one (#panel2) then the first one (#panel1) will slide out so there can be only one panel open at a time.
Anyone can help me with that??
Thanks in advance.
HTML:
<ul id="menu">
<li><img id="icon_1" src="images/image1.png"></li>
<li><img id="icon_2" src="images/image2.png"></li>
<li><img id="icon_3" src="images/image3.png" ></li>
</ul>
<div id="panel1"></div>
<div id="panel2"></div>
<div id="top_panel"></div>
jQuery (#panel1 and #panel2 function taken from http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-plugin):
$(document).ready(function(){
$('#panel1').slidePanel({
triggerName: '#icon_1',
speed: 'slow'
});
$('#panel2').slidePanel({
triggerName: '#icon_2',
speed: 'slow'
});
});
$(document).ready(function(){
$("#icon_3").click(function(){
$("#top_panel").slideToggle("slow");
});
});
Something in these lines. I would you data-* attributes to provide a relation between the panels and the images. The follow up the logic based on the conditions.
Javascript
$('#panel1').slidePanel({
speed: 'slow',
position: 'static'
});
$('#panel2').slidePanel({
speed: 'slow',
position: 'static'
});
$("[id^=icon]").click(function () {
// Current active panel
var $currPanel = $('#' + $(this).data('panel'));
// Slideup all the other panels other than $currPanel
$('.panel').not($currPanel).slideUp();
// If $currPanel has no active class only then slide down
if (!$currPanel.hasClass('current')) {
$currPanel.slideDown("slow");
}
// Add class active to current panel
$currPanel.addClass('current');
// Remove class for other panels
$('.panel').not($currPanel).removeClass('current');
});
HTML
<ul id="menu">
<li>
<img id="icon_1" src="images/image1.png" data-panel="panel1">
</li>
<li>
<img id="icon_2" src="images/image2.png" data-panel="panel2">
</li>
<li>
<img id="icon_3" src="images/image3.png" data-panel="top_panel">
</li>
</ul>
<div id="panel1" class="panel"></div>
<div id="panel2" class="panel"></div>
<div id="top_panel" class="panel"></div>
Check Demo

jquery mobile page with more button

I am setting up a j query mobile page showing over 50 elements, any suggestion on how to show only the first 10 when open up the page, and with a more button on the bottom which can show all if click on it. my script is:
<body>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1 style="white-space:normal">body</h1>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<li>Feature listings </li>
<ul data-role="listview" data-filter="false">
<table>
<li>
<a href="/users/264/properties/50473">
<img src="/media/2012/11/01/011528_47689.jpg?m=resize&o[geometry]=80x60&s=f9e49fbb929e8d1b" />
<h3>7C/192 Willis Street</font></font></font>, Beijing</h3>
<p>Buyer Enquiry Over $305,000<br />Ref: 47689</p></a>
</li>
<li>
<a href="/users/264/properties/50474">
<img src="/media/2012/11/01/011533_47722.jpg?m=resize&o[geometry]=80x60&s=b4482c7638c512b4" />
<h3>606/35 Abel Smith Street</font></font></font>, Te Aro</h3>
<p>Tender<br />Ref: 47722</p></a>
</li>
<li>
<a href="/users/264/listings/50476">
<img src="/media/2012/11/01/011539_47691.jpg?m=resize&o[geometry]=80x60&s=66def46f1524e177" />
<h3>8/34 William Street</font></font></font>, Hataitai</h3>
<p>Buyer Enquiry Over $280,000<br />Ref: 47691</p></a>
</li> ........
....... over 50 elements
You can try using slice with your li elements and hide those.
First, hide all of them with CSS:
li { display: none; }
Then show the first 10 in JavaScript, and set up click event listener to show the hidden ones:
$('li').slice(0,10).css('display', 'block');
$('#more-button').click(function() {
$('li:hidden').show();
});

Categories

Resources