I have a div that widens after the user clicks a link (+). I'll get the contents to a local file that contains paragraphs to print. This paragraph consists of a link (-) that returned the original div. For this I am using the following script:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.more').click(function(){
$('#'+$(this).attr('href')).load('content-box_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.reset').click(function(){
$('#'+$(this).attr('href')).load('reset_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
The (+) link has class "more", and (-) the class "reset". The first link works exactly as I wanted it, while the second one does not recognize the link's class (-) (I do not know if it's because it comes from an external file and because the page does not refresh when it prints ..) redirect to href that results in error. I was not very into JS and any help was appreciated!
UPDATED HTML:
<
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="header">
<div id="trans-bar" style="background-image: url('img/transparencia.png');">
<div class="trans-center">
<center><img src="img/logo-sysdevmobilecomputing.png" style="width: 300px; height: 40px"></center>
</div>
<div class="trans-right">
<div class="trans-lang">
<a class="trans-link" href="index_en.html" style="color: whitesmoke;">EN</a><strong> | </strong><a class="trans-link" href="index.html" >PT</a>
</div>
</div>
</div>
<section class="section-white">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/banner-kalipso.png" alt="...">
</div>
<div class="item">
<img src="img/banner-mss.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner-apps.jpg" alt="...">
</div>
</div>
</div>
</div>
</section>
<div id="header-box">
<p>Kalipso is a fast and powerful mobile application generator for Microsoft OS (Mobile, CE, Seven, 8 PRO and Windows 10) and Android.</p>
<br>
<a id="botao-head">Visit Website</a>
</div>
</div>
</header>
<div id="content">
<div class="content-box">
<div class="content-box-img">
<img src="img/logo-sysdevmss.png">
</div>
<div id="borderLeft"></div>
<div class="content-box-text" id="sales" style="margin-top: 25px;">
<p>Mobile sales System – Mobile application for Pre- Sales and Auto sales, distribution and tecnical services. Available to PDA and Tablet.<a class="more" href="sales" style="text-decoration: none;">[+]</a></p>
</div>
<div class="content-box-link">
<center><a id="botao-um">Visit Website</a></center>
</div>
</div>
<div class="content-box">
<div class="content-box-img">
<img src="img/logo-sysdevkalipso.png">
</div>
<div id="borderLeft"></div>
<div class="content-box-text" id="kalipso" style="margin-top: 25px;">
<p>Kalipso is a fast and powerful mobile application generator for Microsoft OS (Mobile, CE, Seven, 8 PRO and Windows 10) and Android.<a class="more" href="kalipso" style="text-decoration: none;">[+]</a></p>
</div>
<div class="content-box-link">
<center><a id="botao-dois">Visit Website</a></center>
</div>
</div>
<div class="content-box">
<div class="content-box-img">
<img src="img/logo-sysdevapps.png">
</div>
<div class="content-box-text" id="apps" style="margin-top: 25px;">
<p>Sysdev is a company focused on developing mobile solutions in the techno-industry area.<a class="more" href="apps" style="text-decoration: none;">[+]</a></p>
</div>
<div class="content-box-link">
<center><a id="botao-tres">Visit Website</a></center>
</div>
</div>
<div id="message-box" style="background-image: url('img/banner-sobre.jpg')">
<div class="msg-links">
<ul>
<li>
<a href="sobre" id="sobre-link">About</a>
</li>
<li>
<a href="visao" id="visao-link">Vision</a>
</li>
<li>
<a href="missao" id="missao-link">Mission</a>
</li>
<li>
<a href="valores" id="valores-link">Values</a>
</li>
</ul>
</div>
<section id="content-msg">
<div id="sobre">
<div class="msg-header">
<h1>ABOUT <strong style="color:#00a6d4;">SYSDEV</strong></h1>
</div>
<style>
#sobre-link{
color:#00a6d4;
}
</style>
<div class="msg-content">
<p>It's a software company specialized in the development of mobility solutions in the techno-industrial area.</p>
<p>With an expert software development and programming team, Sysdev works constantly to provide integrated solutions, improving the process and effectiveness of all mobile solutions used by companies which in turn increases their profitability and efficiency.</p>
</div>
</div>
</section>
</div>
</div>
<div id="footer">
<footer>
<div id="footer-info">
<div class="info">
<center><img id="address" src="img/address.png"><h3>Address</h3></center>
<p>Rua Dom Manuel Barbuda e Vasconcelos N31/33</p>
<p>Urbanização Glicínias</p>
<p>3810-498 AVEIRO, Portugal</p>
</div>
<div id="contact" class="info">
<center><img id="phone" src="img/phone.png"><h3>Contacts</h3></center>
<p>Main Line: +351 234 188 027</p>
<p>Sales Line: +351 234 024 457</p>
<p>Support Line: +351 234 098 189</p>
<p>Fax: +351 234 188 400</p>
</div>
<div class="info">
<center><img id="mail" src="img/mail.png"><h3>Emails</h3></center>
<p>Sales: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Support: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<div id="footer-links">
<div id="sysdev" class="links">
<ul>
<li><a href="https://sysdevmss.com/pt">SYSDEV MSS</a></li>
<li><a href="https://sysdevkalipso.com/en">SYSDEV KALIPSO</a></li>
<li><a href="https://sysdevapps.com/pt">SYSDEV APPS</a></li>
<li><a href="mailto:[email protected]">CONTACT US</a></li>
</ul>
</div>
<div id="social" class="links">
<ul>
<li><a href="https://www.facebook.com/SysdevMobile/"><img src="img/facebook.jpg"></a></li>
<li><a href="https://www.youtube.com/user/MrktSysdev"><img src="img/youtube.jpg"></a></li>
<li><a href="https://www.linkedin.com/company/811286?trk=tyah&trkInfo=tarId%3A1413147327921%2Ctas%3Asysdev%2Cidx%3A2-1-4"><img src="img/linkedin.jpg"></a></li>
<li><a href="https://twitter.com/Sysdevmobile"><img src="img/twitter.jpg"></a></li>
</ul>
</div>
<div id="rights" class="links">
<ul>
<li style="margin-right: 10px;">@ 2017 SYSDEV</li>
<li>POWERED BY</li>
<li><img src="img/logo-goweb.png"></li>
</ul>
</div>
</div>
</footer>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.msg-links ul li a').click(function(){
$('#content-msg').load('messages_en.phtml #' + $(this).attr('href'));
return false;
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.more').click(function(){
$('#'+$(this).attr('href')).load('content-box_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.reset').click(function(){
$('#'+$(this).attr('href')).load('reset_en.phtml #' + $(this).attr('href')+'-p');
return false;
});
});
</script>
</body>
</html>