When I click on any link it's names should up in above banner, like sr no 1 name is jack and smith then TEST1 should replace by jack and test2 by smith and when i click on other name then in place of jack and smith those names should show and i have 100+ data names so i need just a simple few lines jQuery code which will do that without refreshing my page... and one more thing when page loads then TEST1 and TEST2 should show auto 1st name...
Sorry I did a lot of typing but starter here please help
<div style="border:1px solid black;">
<div style="display:inline; margin-left:20%;">
<img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
<p id="h1" style="display:inline;" placeholder="Test">TEST1</p>
</div>
<div style="display:inline; margin-left:30%;">
<img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
<p id="h2" style="display:inline;">TEST2</p>
</div>
</div>
<br>
<div>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 1</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p id="home">jack</p>
<p id="away">Smith</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 2</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p id="home">Jhon</p>
<p id="away">hill</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 3</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p>jason</p>
<p>smantha</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 4</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p>Ducan</p>
<p>Gio</p>
</div>
</div>
</a>
</div>
$(document).ready(function(){
$("#h1").replaceWith($('#home').text());
$("#h2").replaceWith($('#away').text());
});
$("#link").click(function(){
var x = $("#home").html();
var y = $("#away").html();
//alert(x);
$("#h1").html(x);
$("#h2").html(y);
});
You should not assign the same id to multiple html elements (it is malformed and jQuery won't be able to find the elements you intend). In addition, you forgot to set attributes for some of the names that you want to populate at the top. Finally, you are using replaceWith() which is removing the elements that you are then looking to update later on click. I changed several of your ids to classes, filled in the missing ones, and updated your jQuery to eliminate the replaceWith() issue and work with the class approach. See below.
$(document).ready(function() {
$("#h1").html($(".home").first().text());
$("#h2").html($(".away").first().text());
});
$(".link").click(function() {
var x = $(this).find(".home").first().html();
var y = $(this).find(".away").first().html();
$("#h1").html(x);
$("#h2").html(y);
});
<div style="border:1px solid black;">
<div style="display:inline; margin-left:20%;">
<img style="display:inline;" src="https://via.placeholder.com/50x50" height="50px" width="50px">
<p id="h1" style="display:inline;" placeholder="Test">TEST1</p>
</div>
<div style="display:inline; margin-left:30%;">
<img style="display:inline;" src="https://via.placeholder.com/50x50" height="50px" width="50px">
<p id="h2" style="display:inline;">TEST2</p>
</div>
</div>
<br>
<div>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 1</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">jack</p>
<p class="away">Smith</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 2</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">Jhon</p>
<p class="away">hill</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 3</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">jason</p>
<p class="away">smantha</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 4</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">Ducan</p>
<p class="away">Gio</p>
</div>
</div>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related
I have a php page which dynamically generates ID cards. So I want that when the user clicks a button that id card which is a element gets printed. I tried all the answers available in Stackoverflow but all of them are changing size of the size of the div element whenever i am clicking the print button. Can someone please help me to solve this problem?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
font-size: 0.8em;
padding: 5px 10px 5px 10px;
margin: 0;
}
</style>
</head>
<body>
<div id="divid" style="border: 1px solid black;width: 30%;height: 250px;">
<img src="images/logo_small.png" width="150px">
<img src="images/indane.png" width="150px">
<img style="float: right;" src="images/zayed.jpg">
<p style="display: inline-block;"><b>Name:</b>Zayed Ahmed</p>
<p style="display: inline-block;"><b>Desig:</b>Delivery Man</p>
<p style="display: inline-block;"><b>DOB:</b>07/09/1974</p>
<div></div>
<p style="display: inline-block;"><b>Emp ID:</b> CTPL-01</p>
<p style="display: inline-block;"><b>PF Code:</b> XXXXXX</p>
<p style="display: inline-block;"><b>ESI Code:</b> 1234567890</p>
<div></div>
<p style="display: inline-block;"><b>Address:</b>53, Alimuddin Street, Kolkata-700016</p>
<div></div>
<p style="display: inline-block;"><b>Mobile :</b>93973878873</p>
<p style="display: inline-block;"><b>Emergency:</b> 9763867657</p>
<hr>
<img style="float: left;margin-left: 20px;" src="http://api.qrserver.com/v1/create-qr-code/?data=www.creativett.com&size=50x50">
<img src="images/sign.png" style="float: right;margin-bottom: 5px;margin-right: 10px;margin-top: 0;">
</div>
I am trying to figure out how I can close the other div's when I expand one.
Look at my code here:
$( document ).ready(function() {
$( ".faq-question" ).click(function() {
$(this).toggleClass('open');
$(this).parent().next('.field-faq-answer').toggle();
});
});
.field-faq-answer{
display:none;
}
.faq-antwoord{
border-bottom: 1px solid #ccc;
margin-top:10px;
padding-bottom:10px;
}
.faq-antwoord p{
margin-bottom:0px;
padding-left: 10px;
border-left: 2px solid #3395d3;
margin-left:10px;
}
.field-faq-question-first{
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 1
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 1
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 2
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 2
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 3
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 3
</p>
</div>
</div>
</div>
It is now possible to click on titel 1 and titel 2 and both content will be shown. But I want only want to show 1 answer and hide others
To do this you need to call hide() on all other .field-faq-answer elements except the one which was clicked, like this:
$(document).ready(function() {
$(".faq-question").click(function() {
$(this).toggleClass('open');
var $target = $(this).parent().next('.field-faq-answer').toggle();
$('.field-faq-answer').not($target).hide();
});
});
.field-faq-answer {
display: none;
}
.faq-antwoord {
border-bottom: 1px solid #ccc;
margin-top: 10px;
padding-bottom: 10px;
}
.faq-antwoord p {
margin-bottom: 0px;
padding-left: 10px;
border-left: 2px solid #3395d3;
margin-left: 10px;
}
.field-faq-question-first {
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 1
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 1
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 2
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 2
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 3
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 3
</p>
</div>
</div>
</div>
Try this:
$( document ).ready(function() {
$( ".faq-question" ).click(function() {
$('.field-faq-answer').toggle();
$(this).toggleClass('open');
});
});
You can target all the other elements, except the ones you're working with, and close those
$( document ).ready(function() {
var questions = $( ".faq-question" ).on('click', function() {
$(this).toggleClass('open');
questions.not(this).removeClass('open');
var answer = $(this).parent().next('.field-faq-answer').toggle();
$('.field-faq-answer').not(answer).hide();
});
});
You can use nextAll() method for the parent of parent which is faq-container then use find to select field-FAQ-answer and toggle it.
$(this).parent().parent().nextAll('.faq-container').find('.field-faq-answer').toggle();
$( document ).ready(function() {
$( ".faq-question" ).click(function() {
$('.faq-container .field-faq-answer').hide();
$(this).toggleClass('open');
$(this).parent().next('.field-faq-answer').toggle();
});
});
.field-faq-answer{
display:none;
}
.faq-antwoord{
border-bottom: 1px solid #ccc;
margin-top:10px;
padding-bottom:10px;
}
.faq-antwoord p{
margin-bottom:0px;
padding-left: 10px;
border-left: 2px solid #3395d3;
margin-left:10px;
}
.field-faq-question-first{
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 1
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 1
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 2
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 2
</p>
</div>
</div>
</div>
<div class="faq-container">
<div class="field-faq-question field-faq-question-first">
<h3 class="faq-question">
Titel 3
</h3>
</div>
<div class="field-faq-answer">
<div class="faq-antwoord">
<p>
TEST 3
</p>
</div>
</div>
</div>
it's work try it.
I have two div on same page with same id. I want explore description of one div. In my case if i click on div then all desc are expand.
$(document).ready(function() {
var collapsed = "image";
$("#shw_desc").click(function() {
if ($(".desc").is(":visible")) {
$(".desc").slideUp();
$("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(0deg)");
} else {
$(".desc").slideDown();
$("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>
I have two div on same page with same id
This is invalid in HTML. id attributes must be unique within a page. Change the markup to use a common class attribute on those elements instead.
From there you can use the this keyword to reference the element that raised the click event and find the related elements which should be amended.
Also note that you can simplify the logic in your JS code by using slideToggle() and toggleClass() over an if statement, and you can simplify the HTML by putting the inline styles in to a stylesheet. Try this:
$(document).ready(function() {
var collapsed = "image";
$(".shw_desc").click(function() {
$(this).toggleClass('open').next('.desc').slideToggle();
$(this).find(".shw_desc_icon img").attr("src", collapsed);
});
});
.shw_desc {
background-color: #dfdfdf;
font-size: 14px;
float: left;
padding: 4px 12px;
width: 90.3%;
color: #666
}
.shw_desc_icon {
float: right;
transform: rotate(0deg);
}
.shw_desc.open .shw_desc_icon {
transform: rotate(180deg);
}
.desc {
display: none;
border: 1px solid #eee;
padding: 6px 12px;
color: #999;
font-size: 13px;
width: 90%;
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shw_desc nt_selected">
<span>Description 1</span>
<span class="shw_desc_icon glyphicon glyphicon-chevron-right">
<img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
</span>
</div>
<div class="desc">
<p>Some Description 1</p>
</div>
<div class="shw_desc nt_selected">
<span>Description 2</span>
<span class="shw_desc_icon glyphicon glyphicon-chevron-right">
<img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
</span>
</div>
<div class="desc">
<p>Some Description 2</p>
</div>
Identifiers should be unique and is considered invalid Html.
I recommend to ensure to use either a class or data attribute to select your elements and what ever generates the Html ensures unique identifiers are used,..or leave them out all together if not needed.
However, assuming you might not be able to change the generated HTML I will be using your exact markup and only apply the least amount
of changes in the script to make it work.
For the click event you can use [id=identifier] instead of #identifier in your selector, like this $("[id=shw_desc]").click(function() {
This works as selecting by attribute can return multiple results, however, when selecting by identifier $(#...) jQuery will only return the first match.
Within the click event handler code, make sure you always stay within the current context.
This applies, regardless what selector you are using to bind the click handler.
If a shw_desc has been clicked, you don't want to process all .desc elements but only the one next to the current shw_desc that was clicked.
Same for #shw_desc_icon img, you only want to process the image located within the shw_desc that was clicked and not all the others on the page. For this you can use a selector similar to $("#shw_desc_icon img", this)
$(document).ready(function() {
var collapsed = "image";
// Select by attribute to bind to ALL shw_desc elements not just the first one
$("[id=shw_desc]").click(function() {
var $desc = $(this).next('.desc'); //Get the .desc element next to the current context.
if ($desc.is(":visible")) {
$desc.slideUp();
// Use ',this' to ensure you only query for #shw_desc_icon within the current context.
$("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(0deg)");
} else {
$desc.slideDown();
$("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>
Again, having said all that, try to get rid of the duplicate identifiers and use other common attributes of those elements to select them.
Of course, context awareness still applies just the same.
Or the idea
$(document).ready(function() {
var collapsed = "image";
$(".meclick").click(function() {
var $box = $(this).parents('.box:first');
if(!$box.find('.desc:first').hasClass('visible'))
{
$box.find('.desc:first').addClass('visible');
$box.find('.desc:first').slideDown();
$box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(0deg)");
}
else
{
$box.find('.desc:first').removeClass('visible');
$box.find('.desc:first').slideUp();
$box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
.visible{}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
</div>
<div class="box">
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>
</div>
Need help to show "default" picture in the imageHolder when pages is loaded in JavaScript and replaced whit picture from the button click.
<script type="text/javascript">
function changeImg(image) {
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="row">
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<p>
<onload="changeImg('0.jpg')">
</p>
<p id="imageHolder" "changeImg('/upload_dir/pics/Beo/BeoLab/3/BLa3-Black.jpg')"></p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('1.jpg')" style="background-color: #000;" title="sort">·</a>
</p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('2.jpg')" style="background-color: #d2d2d2;" title="sort">·</a>
</p>
</div>
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<div class="panel" id="pic" style=" background-color:#fff;">
<img id="imageHolder" / class="responsive">
</div>
</div>
</div>
i have a load more button that load 10 new hidden div's on click, the problem is that i have 40 hidden div's and the button is setting at the end of the 40's div even when they are hidden, i just want it's position to be directly under the last div shown so when you click it it should load 10 more hidden div's and go down directly to set under the last new shown div. any idea's?
here is the html code(not that the hidden div'd that should show up on button click are the div's of the 's:
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="leb news.css">
<title> leb news</title>
</head>
<div class="all" dir="rtl" lang="ar">
<body>
<div class="header">
<h1>
اخبار لبنان
<img src="paper.gif" alt="paper" height="115" />
LebNews
</h1>
</div>
<div class="clockall">
<div class="clock">
<div class="list">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0" style="float: right">
<TD height="100%" vAlign="top" rowSpan="2" width="181" align="center">
<TABLE id="T_Menu" height="100%" cellSpacing="0" cellPadding="0" width="181" border="0">
<TR>
<TD style="BACKGROUND-IMAGE: url(Images/Menu/bgd.gif); BACKGROUND-ATTACHMENT: fixed; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left top"
vAlign="top" align="center" bgColor="transparent" height="100%"> <TABLE id="T_Menu" cellSpacing="0" cellPadding="0" width="80%" border="0">
<TR>
<TD vAlign="middle" align="center" height="100"><BR>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD align="center"><table cellspacing="0" rules="all" border="1" id="Menu1_Ad_menu" style="border-collapse:collapse;">
<tr align="Center" style="color:#ffa500;background-color:#ffa500;border-width:0px;border-style:Groove;font-family:Trebuchet MS;font-size:12pt;font-weight:bold;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl1:ad_button" value="الرئيسية" id="Menu1_Ad_menu__ctl1_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl2:ad_button" value="اخبار" id="Menu1_Ad_menu__ctl2_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl3:ad_button" value="فن" id="Menu1_Ad_menu__ctl3_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl4:ad_button" value="رياضة" id="Menu1_Ad_menu__ctl4_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
<input type="submit" name="Menu1:Ad_menu:_ctl5:ad_button" value="أدب" id="Menu1_Ad_menu__ctl5_ad_button" style="color:#2C00A8;background-color:Transparent;border-color:#2C00A8;border-width:0px;font-family:Trebuchet MS;font-size:20pt;font-weight:bold;width:150px;" />
</td>
</tr><tr style="font-family:Trebuchet MS;font-size:10pt;">
<td>
</table>
</table>
</table>
</table>
</div>
<div class="article" align="right" style="display: inline-block;" >
<br>
<div class="27" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="28" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="29" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="30" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="31" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="32" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2" >
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="33" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<br>
<br>
<br>
<div class="34" style="display:none; border-style:solid; border-color:aqua; border-width:3px; border-height:150px">
<article>
<a href="/link-to-article/" title="article title">
<img src="paper.gif" alt="article title" align="right" border="2">
<h2>Article title</h2>
<p>Short description</p>
</a>
</article>
</div>
<div class="button">
<button type="button" name="more" id="load">More</button>
</div>
</body>
</html>
here is the jquery of the button:
$(document).ready(function(){
$("div").slice(0, 14).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$("div:hidden").slice(0, 10).show();
// select next 10 hidden divs and show them
if($("div:hidden").length == 0){ // check if any hidden divs still exist
alert("No more divs"); // alert if there are none left
}
});
})
and the css :
html {
background: url(32784_FLS_W01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header h1{
position: absolute;
/*background-color:#C63D0F; */
background-color:transparent;
padding:50px;
padding-left:250px;
padding-right:200px;
margin-left:65px;
margin-right:65px;
font-size:80px;
/* vertical-align: top; */
}
.all {
width: 1370px;
/*height: auto;*/
}
.list {
padding-top:0px;
padding-right:65px;
}
.article img{
height:150px;
width:150px;
border:"5";
}
.article p{
width:800px;
height:65px;
font-size:16pt;
color:black;
text-decoration: none;
}
.article{
padding-top:0px;
/*overflow:hidden;*/
}
ul #mylist li{ list-style-type: none;
}
#mylist li{display:none;}
ul #mylist li img{
height:150px;
width:150px;
border="5";
}
#load {
/* position: fixed; */
height: 30px;
width: 100%;
margin-top:0px;
overflow:hidden;
}
i really tried too many things in css to make it work but it seems that it should be worked jquery or javascript. hope somebody can help.
thanks alot.
https://jsfiddle.net/x3azn/3u46oh39/4/
working sample, off the top of my head, your class for
<div class=<missing quote>button">
<button type="button" name="more" id="load">More</button>
</div>
isn't quoted, but other than that you should post the real code
I just tried your code and there is nothing wrong, maybe instead of this line
$("div:hidden").slice(0, 10).show();
your can tried this
$("div:hidden").slice(0, 10).css('display','block');
If this doesnt work, you could tried pasting all your css and i could check it out what wrong, maybe another class is interfering with your button. Good luck