I wrote a html code to display cards. Added a modal that open and closes when clicked on an event. I am trying to implement the same in react but not able to do it. I am very new to react stuff hence need your help here to make it compatible in react JS.
In HTML, the onclik event is done through the script but in react, i am trying to write a onclik event inside dev but mostly unsuccessful.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popoup in javascript</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
.container {
position: relative;
z-index: 1;
display: flex;
justify-content: left;
align-items: left;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: url(https://images.pexels.com/photos/3747155/pexels-photo-3747155.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat;
background-size: cover;
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
overflow: hidden;
}
.container .card .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .contentBx {
transform: translateY(-20px);
}
.container .card .content .contentBx h2 {
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx p {
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
font-size: 14px;
text-align: left;
margin: 20px 0 10px;
line-height: 1.1em;
padding-left: 15px;
}
.container .card .sci {
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li {
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a {
color: #000000;
font-size: 20px;
}
.blur-filter {
filter: blur(2px);
}
</style>
<style>
[modal] {
opacity: 0;
position: fixed;
top: 120%;
bottom: 0;
left: 0;
right: 0;
color: white;
background: #ffffff38;
backdrop-filter: blur(10px);
overflow: hidden;
transition: 1s linear 0s all;
}
[modal="active"] {
opacity: 1;
top: 0%;
}
[modal] > .modal {
display: contents;
}
[modal] > .flexbox_column {
margin: 0;
}
[modal] > .modal > .modal_header {
display: grid;
grid-template-columns: auto 24px;
padding: 10px;
}
[modal] > .modal > .modal_header > h4 {
font-weight: 500;
}
[modal] > .modal > .modal_header > ._close {
cursor: pointer;
}
[modal] > .modal > .modal_content {
height: 100%;
padding: 10px;
border-radius: 16px;
overflow: scroll;
}
[modal] > .modal > .modal_content::-webkit-scrollbar {
width: 5px;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-track {
background: #e2e2e2;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-thumb {
background: #9a9a9a;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-thumb:hover {
background: #b6b6b6;
}
[modal] > .modal > .modal_content > img {
max-width: 100%;
object-fit: cover;
filter: opacity(0.8);
}
[data-modal] {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
</div>
<!--CARD END-->
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
<!--CARD END-->
</div>
</section>
</div>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
React:
function App() {
return(
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
</div>
<!--CARD END-->
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
<!--CARD END-->
</div>
</section>
</div>
);
}
export default App;
In React you can implement the Onclick function in a component, like this, <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>. Or you can implement it like this and set up the function somewhere else and call it,
<button onClick={handleDelete}>Delete Row</button>. Refer to the React js documentation https://reactjs.org/docs/handling-events.html from the link. Also, post React your code also.
Related
I want to to show a camera icon on center of the Image when hover like below pic,
My output is,
my code is,
import Avatar from '#mui/material/Avatar';
import CameraAltIcon from '#mui/icons-material/CameraAlt';
<Avatar
className='editProfile'
alt="Remy Sharp"
src="/assets/images/avatars/avatar_default.jpg"
sx={{
mx: 'auto',
width: 150,
height: 150,
border: '5px solid #f1f1f1',
boxShadow: '0px 0px 5px -2px',
alignItems: 'center',
'&:hover': {
filter: 'brightness(50%)',
'& $icon': {
display: 'block',
},
},
}}
/>
<CameraAltIcon className='icon'/>
Thanks in advance...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor, nisi a tristique vestibulum, nisl justo luctus quam, nec scelerisque est nunc ac dui. Cras sed dui ac enim elementum feugiat. Aliquam erat volutpat. Maecenas tempus, ipsum at ullamcorper efficitur, est lacus aliquet massa, non faucibus lacus lectus a est. Proin consequat, orci vel auctor interdum, libero libero ornare libero, a tempus felis diam ac ligula. Aliquam nec tempus nibh. Fusce vehicula est et leo consequat, at elementum lacus suscipit. In hac habitasse platea dictumst. Proin elementum libero auctor, scelerisque lacus non, facilisis eros. Ut vestibulum nibh sit amet lacus rutrum, sit amet euismod massa eleifend. Donec at efficitur metus. Suspendisse ultricies dolor vel lectus cursus, in cursus quam mollis.
My titles are very long I want them to look like this:
This is a title of...
This is my code
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Link href={`/${encodeURIComponent(data.slug)}`}>
<a>{data.title}</a> // This is a string of title text
</Link>
</Typography>
</CardContent>
How to limit them to 18 characters only and add ... at the end?
Usually you solve this with CSS.
Set a max-width together with text-overflow: ellipsis;.
The advantage is better SEO and the browser is able to use the available space more efficiently than just counting characters.
For example a M character is larger than a l character.
But you can also limit it with JS:
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Link href={`/${encodeURIComponent(data.slug)}`}>
<a>{data.title.length <= 18 ? data.title: (data.title.substr(0, 18) + "...")}</a> // This is a string of title text
</Link>
</Typography>
</CardContent>
You can use simple custom css to limit this
span {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
<span>
rem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo. Donec vitae arcu. Nullam eget nisl. Etiam commodo dui eget wisi. Praesent vitae arcu tempor neque lacinia pretium. Aenean fermentum risus id tortor. Proin mattis lacinia justo. Integer vulputate sem a nibh rutrum consequat. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit.
</span>
I have a text that has a lot of characters, and I need to limit what is displayed on screen to 20 chraracter only, what do I do?
Example: if I wish to display only 20 character of the following text, what should I do?
function App() {
return (
<>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
accusamus nostrum harum! Tenetur incidunt saepe explicabo rerum et
cumque architecto reiciendis, deleniti asperiores animi? Perspiciatis
vel nemo vitae nulla iure itaque iste pariatur aliquam unde quis magni,
quasi culpa in quisquam, sunt, corrupti ipsa! A sunt consectetur
aspernatur porro, exercitationem quasi, quibusdam mollitia numquam, aut
veniam voluptate? Esse, animi quibusdam voluptatem eligendi aliquam
minima nam impedit eum dignissimos praesentium, quae consequuntur,
deserunt neque? Tenetur, quae nihil. Sit, iure, itaque placeat beatae
distinctio nesciunt quisquam fugiat illo quod eius, architecto optio.
Rerum repudiandae perferendis vero laborum obcaecati vel aliquam quod
distinctio in id similique, quisquam odit accusantium quos veritatis
animi autem iste possimus, odio corrupti. Perferendis tenetur, non quis
animi rerum earum error sed officiis sint expedita et ipsum? Omnis nihil
non, tenetur veniam officiis repudiandae nobis, ab commodi inventore sed
maxime. In porro quo perspiciatis facilis. Maxime saepe, ipsa autem
eligendi cumque delectus provident vel aliquam fuga aut laborum facere
beatae repellendus, minus in quae exercitationem porro! Quod nesciunt
libero natus exercitationem beatae, accusamus maxime sint aliquam
voluptate aspernatur in dignissimos perferendis quo minima odio omnis,
officiis neque ullam, et commodi perspiciatis. Explicabo error ea
necessitatibus reprehenderit consequuntur inventore reiciendis!
</p>
</>
);
}
export default App;
You can use CSS using the ch unit I believe.
.Twenty_characters{
font-family: monospace;
width: 20ch;
overflow: hidden;
white-space: nowrap;
}
That being said I think you have to use a monospace font for this to work. Which might not be something you want to do.
I have 2 columns on my page... my issue is that I want the right column to stack underneath my left column if browser size is made smaller. I am using angular material but don't mind using custom styling to fix this. Any help will be appreciated.
HTML:
<div layout="row" layout-align="center center" flex>
<section layout="row">
<div id="nav" flex="20" layout="column" layout-align="space-around">
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
</div>
<div id="content" flex>
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
</div>
</section>
</div>
CSS:
.datepickerdemoBasicUsage md-content {
padding-bottom: 200px; }
.datepickerdemoBasicUsage .validation-messages {
font-size: 11px;
color: darkred;
margin: 10px 0 0 25px; }
.fixed-calendar {
width: 340px;
height: 340px;
display: block;
}
.fixed-calendar .md-calendar-scroll-mask {
width: 340px !important;
}
.fixed-calendar .md-virtual-repeat-scroller {
width: 340px !important;
height: 308px;
overflow: hidden !important;
}
JSFiddle Demo
Something like this on your parent layout="column" layout-gt-xs="row"
<div ng-app="sandbox">
<div>
<section layout="column" layout-gt-xs="row">
<div id="nav" flex>
<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>
</div>
<div id="content" flex>
<h2>Right Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas maxime officia aliquam nesciunt debitis quam optio odio soluta corrupti, mollitia, possimus iure quos nostrum eius nam. Aperiam voluptatum voluptate unde.</p>
</div>
</section>
</div>
</div>
This says stack child elements into a column.
Then if the browser width gets to greater than or equal xs (>= 600px), make child elements into a row.
Fiddle
I need some help. I'm designing a website. In home page, there are several links. With the help of jquery, I want to hide and show content (on the same page) depending on the links which the user clicks.
I have achieved it, but I feel; its not the right approach. Is there anyway to achieve this with minimal code? may be using arrays or loops? Please have a look at the example that I have created.
Thanks in advance.
$('.para2').hide();
$('.para3').hide();
<!--One-->
$('.one').click(function(){
$('.para1').show();
$('.para2').hide();
$('.para3').hide();
})
<!--Two-->
$('.two').click(function(){
$('.para2').show();
$('.para1').hide();
$('.para3').hide();
})
<!--three-->
$('.three').click(function(){
$('.para3').show();
$('.para1').hide();
$('.para2').hide();
})
<ul>
<li><a href="#" class="one" >Para -1</a></li>
<li><a href="#" class="two" >Para -2</a></li>
<li><a href="#" class="three" >Para -3</a></li>
</ul>
<div class="para1" style="width:500px; padding:10px; border:1px solid red; background:#009966">
<h1>Para -1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para2" style="width:500px; padding:10px; border:1px solid red; background:#333333">
<h1>Para -2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
<div class="para3" style="width:500px; padding:10px; border:1px solid red;">
<h1>Para -3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor purus at massa venenatis nec facilisis lectus volutpat. Suspendisse potenti. Proin facilisis, nisl a auctor venenatis, metus nisi congue tortor, quis laoreet nisl magna in massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>
You may change like below:
Html:
<ul>
<li><a href="#" class="paraLink" data-para="one" >Para -1</a></li>
<li><a href="#" class="paraLink" data-para="two" >Para -2</a></li>
<li><a href="#" class="paraLink" data-para="three" >Para -3</a></li>
</ul>
<div class="para one" ...
<div class="para two" ...
<div class="para three" ...
JS:
$(function() {
$('.paraLink').click(function(e) {
e.preventDefault();
$('.para').hide();
$('.'+$(this).data('para')).show();
});
});
THE WORKING DEMO.