Below is my html, but my interest is in the script. I would like to style the font awesome icons i.e. increase font-size, align etc. Can you add a css element inside the script? I have deliberately isolated the script that I'm speaking about so you don't have to look through the entire code. Its the middle section of the code below
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script>
$(function() {
$("#toggle-button").click(function() {
var i = $(this).find('i');
if ($("#collapse").is(':visible')) {
i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
$("#collapse").slideUp(400);
} else {
i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
$("#collapse").slideDown(400);
}
});
});
</script>
</head>
<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2>
<div id="collapse" class="biography-box" style="display:none">
<p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button id="toggle-button" class="btn btn-info" style="color: black; background-color: transparent; border: none; font-color: black; width:778px" type="button">
<i class="fa fa-angle-double-down"></i>
</button>
Since you are Using only one fa ICON and I understand you want to style and decorate it by script on page load so that if appears distinct and catchy.so here is my solution
$(function() {
$(document).find(".fa").css('color', 'red').addClass('fa-2x');
// rest of the code as it is
}
You can directly use style to use fa-2x, fa-3x, fa-4x, fa-5x to increase font size of the font awesome icon and also for giving another style you can add a different class while you are adding fa-angle-double-down and fa-angle-double-up
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script>
$(function() {
$("#toggle-button").click(function() {
var i = $(this).find('i');
if ($("#collapse").is(':visible')) {
i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down');
$("#collapse").slideUp(400);
} else {
i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
$("#collapse").slideDown(400);
}
});
});
</script>
</head>
<h2 style="font-family: times-new-roman; font-size: 33px; text-align: center; color:rgb(85,174,249)">BIOGRAPHY</h2>
<div id="collapse" class="biography-box" style="display:none">
<p>Albert Einstein (14 March 1879 – 18 April 1955) was a German-born theoretical physicist.[5] Einstein developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[4][6]:274 Einstein's work is also known for its influence on the philosophy of science.[7][8] Einstein is best known by the general public for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation").
</p>
</div>
<button id="toggle-button" class="btn btn-info" style="color: black;background-color: transparent;border: none;font-color: black;width: 100%;text-align: right;" type="button">
<i class="fa fa-angle-double-down fa-2x"></i>
</button>
sure, you can use jquery.css function for this:
$("#toggle-button").click(function() {
var i = $(this).find('i');
if ($("#collapse").is(':visible')) {
i.removeClass('fa-angle-double-up').addClass('fa-angle-double-down').css('color', 'red');
$("#collapse").slideUp(400);
} else {
i.removeClass('fa-angle-double-down').addClass('fa-angle-double-up');
$("#collapse").slideDown(400);
}
});
.css({'color': 'red','font-size': '33px'}) // for multiple properties
DOCS: http://api.jquery.com/css/
Related
I'm working on creating some data visualizations for our clients and they have requested that I put a description of the data chart on the left side with the data chart on the right side. Clearly I need to create a divider to split this in half, but I'm over thinking this. How do I get the desired output like the link below?
I want to provide my full code for context. I know it's annoying to include my menu and references, but I rather provide too much detail than too little.
<!DOCTYPE html>
<html lang="en">
<title>The Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
<body>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-black w3-card">
<a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
VARC Home
About
Project Search
Methods
<div class="w3-dropdown-hover w3-hide-small">
<button class="w3-padding-large w3-button" title="More">Data <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
Overview
Access Relevance
Access Type
Community Care and Virtual Care
Model Classification
Implementation Status
OVAC Priorities
Project Type
Type of Care
</div>
</div>
<i class="fa fa-search"></i>
</div>
</div>
<!-- Navbar on small screens (remove the onclick attribute if you want the navbar to always show on top of the content when clicking on the links) -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
Results
Project Search
Methods
Overview
Access Relevance
Access Type
Community Care and Virtual Care
Model Classification
Implementation Status
OVAC Priorities
Project Type
Care Type
</div>
<!-- Page content -->
<div class="w3-content" style="max-width:2000px;margin-top:46px">
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<style>
body {
margin: 20px auto;
font-family: 'Lato';
font-weight: 300;
text-align: center;
}
#pie-chart {
margin: 4 auto;
height: 575px;
}
</style>
<body style="background-color:black;">
<center>
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id="pie-chart"></div>
</body>
<script>
var pieDiv = document.getElementById("pie-chart");
pie_chart = {
'data': [{
'labels': ['<b>Primary Care</b>', '<b>Specialty Care</b>', '<b>Mental Health</b>', '<b>Inpatient/Acute Care</b>', '<b>Long-term Care</b>', '<b>General Care/Not Specified</b>'],
'values': [4, 21, 8, 1, 1, 14],
'textinfo': 'percent',
'text': ['<b> Description</b>: Projects focused on primary care.', '<b> Description</b>: Projects focused on specialty care.', '<b> Description</b>: Projects focused on mental health', '<b> Description</b>: Projects focused on inpatient/acute care', '<b> Description</b>: Projects focused on long-term care', '<b> Description</b>: The type of care is not indicated or is not specific to one type'],
'type': 'pie',
'name': "Care Types",
'hole': .4,
'hoverinfo': 'label+percent+text',
'sort': false,
}],
'layout': {
'title': 'Type of Clinical Care Setting'+'<br>'+'N = 50'
}
}
Plotly.newPlot('pie-chart', pie_chart.data, pie_chart.layout);</script>
</div></div></div></div></div></div></div></div>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<!-- Extra large modal -->
<<!-- Trigger the modal with a button -->
<!-- Extra large modal -->
<div style="text-align: center;">
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".cd-example-modal-xl">Data Definitions</button></div>
<div class="modal fade cd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content"><h5> Care Type Definitions </h5> <br><table>
<tr>
<th>Field</th>
<th>Definition</th>
</tr>
<tr>
<td>Primary Care</td>
<td>The project is focused on primary care</td>
</tr>
<tr>
<td>Specialty Care</td>
<td>The project is focused on specialty care</td>
</tr>
<tr>
<td>Mental Health</td>
<td>The project is focused on mental health</td>
</tr>
<tr>
<td>Inpatient Care/Acute Care</td>
<td>The project is focused on inpatient/acute care</td>
</tr>
<tr>
<td>Long-term Care</td>
<td>The project is focused on long-term care</td>
</tr>
<tr>
<td>General Care/Not Specified</td>
<td>The type of care is not indicated or is not specific to one type</td>
</tr>
</table>
<p><br>
</div> <div style="text-align: center;"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div></div>
</div>
</div>
</div>
</div><div style="text-align: center;">
<p style="background-color:black;color:white;"><br>
Last updated on 7/20/2020</div></p>
</body>
Bootstrap has a wonderful grid system that would help you accomplish this.
Consider doing the following snippet:
<div class="container">
<div class="row">
<div class="col">
<!-- DESCRIPTION -->
</div>
<div class="col">
<!-- DIAGRAM -->
</div>
</div>
</div>
This link should provide some more information and examples on the grid system: Bootstrap Grid System
Make sure you import bootstrap so the classes work: Getting Started with Bootstrap
In the event that you do not wish to implement bootstrap, here is a link that will help with implementing the same features in your current style sheet. Using Bootstrap just simplifies the need to implement these classes in your style sheet: CSS Grid Layout
If I understand what you are trying to do, I would say you don't need a grid. I would create a parent div and inside this parent div, I would include two other divs: The first child div would contain the description of the data and the other one would contain the chart itself. Then I would apply 'display: flex' to the parent div. The divs will then be side by side. Like so:
<div style="display: flex">
<div>
Data description
</div>
<div>
Chart
</div>
</div>
Parting from your code and the answer provided by #El donny i recommend doing the following inside the <body> tag you already have:
body {
margin: 0;
padding: 0;
}
#content {
display: flex;
height: 100vw;
}
#description {
background-color: black;
color: white;
width: 50%;
}
<div id="content">
<div id="description">Description</div>
<div id="pie-chart">Pie</div>
</div>
** The styling of the example is just for you to see the result **
I'm trying to use get this tab bar from Material Components: https://material.io/develop/web/components/tabs/tab-bar/
I'm having trouble following the installation steps. This is what I have so far:
tab.html:
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
<span class="mdc-tab__text-label">Favorites</span>
<span class="mdc-tab__text-label">Favorites2</span>
<span class="mdc-tab__text-label">Favorites3</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
tab.css:
<style lang="scss">
#import "#material/tab-bar/mdc-tab-bar";
#import "#material/tab-scroller/mdc-tab-scroller";
#import "#material/tab-indicator/mdc-tab-indicator";
#import "#material/tab/mdc-tab";
body{
background-color: blue;
}
#app
{
main
{
margin-top:65px;
}
div.mdc-layout-app--main-container{ display: block !important;}
div.mdc-layout-app
{
max-width: 1000px;
background-color: white !important;
margin: 0 auto;
}
header.mdc-top-app-bar
{
max-width: 1000px;
}
}
</style>
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
I want it to look like the demo, but right now it looks like something completely different. I was wondering if someone could break down these steps more for me as I'm extremely confused. Thanks. All help is appreciated.
This is what it looks like: enter image description here
I wanted it to look like this: enter image description here
Are you trying to run SCSS in the browser? If so, this is the problem. The "CSS" portion of your code is actually SCSS, a nested syntax that needs to be compiled down to regular CSS in order for the browser to be able to read it. For example:
SCSS (Browser cannot read)
#app {
main {
margin-top: 65px;
}
}
CSS (Works fine)
#app main {
margin-top: 65px;
}
Material should provide plain CSS version for you, otherwise you will need to use a compiler.
To add on Simran his answer:
I see no <script src="app.js"></script> in your HTML.
You need to compile the code below using babel and include the output file in your HTML.
import {MDCTabBar} from '#material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
If it is unclear how you do this re-read the Getting started
Step 3: Webpack with ES2015 is about compiling JavaScript using Babel
Consider this:
<div>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>
The h and m classes are built by a tool that I am not permitted to modify.
I would like to change the 'h' font size in this and only this place. All other places that use the 'h' class must keep the same font size.
I was thinking about adding my own class like this:
<div class='myheader'>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>
and define this in my .css file like this:
.myheader > * {
}
.myheader.h {
font-size:20px;
}
Unfortunately it does not work for it does not 'see' .myheader.h. It applies only style read from .h and .myheader but not both at the same time.
Is there any other way to change the header font size?
Before you say "modify <div class='h'>header</div>" like I need to reiterate - these likes are being created by a tool - in run-time - so I cannot modify them.
PS. I am using angularJS, but I am not allowed to use jQuery calls.
Thank you in advance!
- Greg,
See http://plnkr.co/edit/R0elLsOdcOfsLpHB1NT1 for an example.
I am able to change font size, and that's cool, but when I add change of a color, it spreads down, and I don't want it. I want in this example to change Level 3, and that's it.
looking at this .myheader.h is inccorrect, what you need is .myheader .h
.myheader .h {
font-size: 20px;
color: red;
}
<div class='myheader'>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>
Next css children elements will inherit certain attributes, of their parents
The div .level4 is inside level3 so it will inherit from its parent (.level3) unless you override this behaviour.
You have the text content Level 3 in .level4 and afterwards a single div with class level4.You can simply override the inherited rule but making the children elements retain their "default" using color:initial
.level3 > * {
color:initial;
}
Snippet below
/* Put your css in here */
.level1 {
font-size: 10px;
}
.level2 {
font-size: 20px;
}
.level3 {
font-size: 30px;
}
.level4 {
font-size: 40px;
}
.changer .level3 {
font-size: 100px;
color: red;
}
.level3 {
border: solid green;
}
.level3>* {
color: initial;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class='level1, changer'>
Level 1
<div class='level2'>
Level 2
<div class='level3'>
Level 3
<div class='level4'>
Level 4
</div>
</div>
</div>
</div>
</body>
</html>
I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.
I need some help. I have to write a javascript code that will toggle the a element for show more or less. If I click on show more, it should show the more with a link for show less.
Problem I am Having
1. If I click show more About the Author, instead of just showing more info about just that, it will also show more info about the book description, and who this book is for.. I don't want it to do that, I just want it to show me more info about just that specific one.
2. It's also not showing me or giving me the less link option.
Here is my HTML and JavaScript code.
$(document).ready(function() {
$("#jdom").click(function() {
$("a").toggle(function () {
$(this).text("").siblings("div").hide();
}, function() {
$(this).text("Less").siblings("div").show();
});
});
});
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
}
section {
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="index.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div>
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
</div>
<div class="hide">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
<h2>About the author</h2>
<div>
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
</div>
<div class="hide">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire
him.</p>
</div>
Show more
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
</div>
<div class="hide">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</section>
</body>
</html>
I don't know what I am doing wrong.
Try This,
$(document).ready(function() {
$(document).on('click','a',function(e){
$(this).text( ($(this).text() == "Show more") ? "Less":"Show more" ) ;
$(document).find($(this).attr('data-target')).toggle();
/*OR WITH ANIMATION*/
/*
if($(this).text() == "Show more"){
$(this).text("Less");
$(document).find($(this).attr('data-target')).slideDown(300);
}else{
$(this).text("Show more");
$(document).find($(this).attr('data-target')).slideUp(300);
}*/
});
/*MORE ACTION*//*
$(document).on('click','#jdom',function(e){
$(document).find('a').each(function(){
$(this).trigger('click');
})
});
*/
});
HTML PART UPDATE AS BELOW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="index.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div>
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
</div>
<div class="hide" id="bookDesc">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
<h2>About the author</h2>
<div>
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
</div>
<div class="hide" id="author">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire
him.</p>
</div>
Show more
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
</div>
<div class="hide" id="bookDet">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</section>
</body>
</html>
I have modified the HTML a bit, and JS as well. Try using like this, it might give you solution.
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var moreSection = $(this).parents(".section").find(".more-section");
if($(this).text() == "Show more" && moreSection.hasClass("hide")){
$(this).text("Show less");
moreSection.removeClass("hide").addClass("show");
}else{
$(this).text("Show more")
moreSection.addClass("hide").removeClass("show");
}
});
});
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
}
section {
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
div.show {
display: block;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div class="section">
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
<div class="hide more-section">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
</div>
<h2>About the author</h2>
<div class="section">
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
<div class="hide more-section">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire him.</p>
</div>
Show more
</div>
<h2>Who this book is for</h2>
<div class="section">
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
<div class="hide more-section">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</div>
</section>