I want click on each button to view information in each posts but it view all when I click on it.
Here is my example. I have HTML like:
<div class='list post'>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 1</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 2</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='hidden'>Hidden Info 3</div>
</div>
</div>
and I use onclick like:
$('.btn').click(function(){
$('.hidden').css({"visibility":"visible"});
});
But it is not working. I want to use toggle or something like that but I donot know how to do.
Please check jsfiddle here
You can use $(this) to target current clicked .btn button along with .next() to target next immediate sibling of clicked button which is .hidden div:
$('.btn').click(function(){
$('.hidden').css({"visibility":"hidden"});
$(this).next().css({"visibility":"visible"});
});
Updated Fiddle
Try this
$('.btn').click(function(){
$(this).next('.hidden').css({"visibility":"visible"});
});
Try this:
$('.btn').click(function(){
$('.hidden').css({"visibility":"hidden"});
$(this).next().css({"visibility":"visible"});
});
You can also check it here: http://jsfiddle.net/X2kW4/7/
I prefer not to change the the visibility property. Instead add/remove visibility class (Fiddle):
CSS
.post {
height: 100px;
width: 100px;
background: #cd4900;
margin-bottom: 6px;
color: #fff;
text-align: center;
}
.post .btn {
margin-top: 5px !important;
width: 80%;
padding: 5px;
background: green;
margin: 0 auto;
text-align: center;
border-radius: 4px;
cursor: pointer
}
.visible {
visibility: visible !important;
}
.info {
visibility: hidden;
}
JavaScript:
$('.btn').click(function(){
if($(this).next('.info').hasClass('visible') === false)
{
$('.visible').removeClass('visible');
$(this).next('.info').addClass('visible');
}
});
HTML:
<div class='list post'>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 1</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 2</div>
</div>
<div class='post'>
<div class='btn'>btn</div>
<div class='info'>Hidden Info 3</div>
</div>
</div>
Related
I am currently coding a pipeline WebApp in JS/JQuery.
To move my block I use JQuery.draggable. But I would like to be able to select my block with one click and to move it to an other point just by an other click.
Has anyone already done this?
Have a great day! :)
Consider the following example.
$(function() {
function moveItemTo(t) {
$(".selected").detach().removeClass("selected ui-state-highlight").appendTo(t);
}
$(".item").click(function() {
$(this).toggleClass("selected ui-state-highlight");
});
$(".target").click(function(e) {
e.stopPropagation()
moveItemTo(this);
});
})
.item {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
.target {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
.selected {
opacity: 0.65;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div class="ui-helper-clearfix">
<div class="item ui-widget-content">
<p>1. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>2. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>3. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>4. Click Me</p>
</div>
<div class="item ui-widget-content">
<p>5. Click Me</p>
</div>
</div>
<div>
<div class="target ui-widget-header">
<p>Target 1</p>
</div>
<div class="target ui-widget-header">
<p>Target 2</p>
</div>
<div class="target ui-widget-header">
<p>Target 3</p>
</div>
</div>
This does not use any of the jQuery UI, except for CSS. Clicking an Item selects it. Clicking a Target Moves it to that target.
I got 2 divs with the same class and I am trying to move each of the 2 divs into a different div.
setTimeout(function() {
$(".pac-container").prependTo("#gp-content");
}, 500);
.pac-container {
width: 50px;
height: 100px;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
#wrapper1,
#wrapper2 {
width: 25px;
height: 75px;
border: 1px dotted red;
padding: 5px;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container"></div>
<div class="pac-container"></div>
<div id="wrapper1"></div>
<div id="wrapper2"></div>
My goal is now to move the first pac-container into #wrapper1 and the second pac-container into #wrapper2. The pac-container are sitting next to each other at the html-markup and each #wrapper sits on different positions at the html-markup.
Goal
<div id="wrapper1">
<div class="pac-container"></div>
</div>
<div id="wrapper2">
<div class="pac-container"></div>
</div>
You could do it by referencing the .pac-container elements explicitly by index using eq():
var $pac = $('.pac-container');
$pac.eq(0).prependTo('#wrapper1');
$pac.eq(1).prependTo('#wrapper2');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">PAC container 1</div>
<div class="pac-container">PAC container 2</div>
<div id="wrapper1">wrapper1 </div>
<div id="wrapper2">wrapper2</div>
However, this is not very DRY. You could instead use a common class on the wrapper elements, then relate them to the containers by index, something like this:
$('.pac-container').each(function(i) {
$(this).prependTo($('.wrapper').eq(i));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">PAC container 1</div>
<div class="pac-container">PAC container 2</div>
<div class="wrapper">wrapper1 </div>
<div class="wrapper">wrapper2</div>
You can iterate .pac-container and move then individually.
Here in example, I have added wrapper class to use common selector and use .eq() to target the element.
$('.pac-container').each(function(i){
$(this).appendTo($('.wrapper').eq(i))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">1</div>
<div class="pac-container">2</div>
<div class="wrapper" id="wrapper1"></div>
<div class="wrapper" id="wrapper2"></div>
To move an element use detach() and appendTo() Try this:
$(".pac-container").each(function(i){
$(this).detach().appendTo($(".wrapper").eq(i))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pac-container">pac-container1</div>
<div class="pac-container">pac-container2</div>
<div class="wrapper">wrapper1</div>
<div class="wrapper">wrapper2</div>
so I have a div with navigational links (set up using ul/li and a href within the li's).
Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's
I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...
JSFIDDLE
Please see the above jsfiddle for the HTML/CSS/JS involved.
HTML:
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)
Thanks again for your help!
This is one way of achieving it.
HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:
<div id="content">
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
JavaScript - see inline comments:
$(document).ready(function(){
// start of at the home page
navigateTo("#home");
// for every navlink element
$('.tabs > li > a').each(function() {
//when it is clicked
$(this).click(function(e) {
e.preventDefault();
// navigate to the section ilinked to in the href
navigateTo($(this).attr('href'));
});
});
});
function navigateTo(sectionId) {
//hide all tabs
$('.tab_content').hide();
//then show the one we want
$(sectionId).show();
}
You don't need separate click handlers for each menu item. The #tabs li click handler will suffice. I removed the click handlers on each of the links since they are not necessary.
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active selected');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active selected");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn(0);
// At the end, we add return false so that the click on the link is not executed
return false;
});
ul {
list-style: none;
}
.man-banner {
background: url("../images/man-logo.png") no-repeat top;
border-radius: 8px 8px 0 0;
height: 93px;
max-width: 915px;
margin: 15px 15px 0 15px;
}
.banner-nav {
background: #F0F1F2;
border-bottom: 1px solid #D6D8DB;
height: 40px;
max-width: 915px;
margin: 0 15px 15px;
}
.banner-nav a {
font-family: MAN-light, Arial, sans-serif;
font-size: 16px;
margin-left: 20px;
text-decoration: none;
display: block;
float: left;
height: 40px;
position: relative;
color: #303C49;
line-height: 40px;
}
.banner-nav a:hover {
color: #303C49;
}
.banner-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 5;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
top: 0px;
font-weight: normal;
background: #FFF;
border-bottom: 1px solid #FFF;
color: #000;
}
/***************************/
/** Main Content Area **/
/***************************/
#content {
width: 950px;
margin: 5 10;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><a data-tab-id="#home"><span>Home</span></a>
</li>
<li><span>Find Your Vehicle</span>
</li>
<li><span>Downloads</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
You can try to use css to show and hide the blocks when there is an onclick event.
Here some sample code:
CSS
.activetab {
display: block;
}
.tab {
display: none;
}
JAVASCRIPT / JQUERY
$(document).ready(function() {
$(".tabmenu").on("click", function() {
$(".activetab").removeClass("activetab");
$(this).addClass("activetab");
});
});
HTML
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active tabmenu"><span>Home</span></li>
<li class="tabmenu"><span>Find Your Vehicle</span></li>
<li class="tabmenu"><span>Downloads</span></li>
<li class="tabmenu"><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content tab">
1234156124
</div>
<div id="findvehicle" class="tab_content tab">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content tab">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content tab">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
If you want I can create a JSFiddle to see how it works
Hope this works for you!
You have a syntax error, you are closing your document ready callback more than once.
$("#findvehicle").click(function(){
$('a[rel="find_your_vehicle"]').trigger("click");
});
}); // Remove this
$("#downloads").click(function(){
$('a[rel="downloads"]').trigger("click");
});
}); // Remove this
When you remove these extra closes the tabs appear. You'll probably want to hide all but the default tab in that document ready call also.
I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.
If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/
This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.
According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}
$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.
<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});