We Keep Coding

PHP read more read less - Magento 2

I made an read more read less script for my Magento 2 webshop. This is used on a category page where there are serval subcategorie blocks to choose, each subcategory has a description with.
The problem: if I click read more all the descriptions of the subcategories will expand in stead of only the description of the subcategory I clicked read moreI am starting to learn PHP and Magento 2 but I can't fix this, does someone know the solution?
<div class="product description product-item-description">
<div class="more">
<?php if ($_subCategory->getDescription()) {
$string = strip_tags($_subCategory->getDescription());
if (strlen($string) > 250) {
// truncate string
$stringCut = substr($string, 0, 250);
$string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... Lees meer';
}
echo $string;
?>
</div>
<?php
}else {?>
<?php /* #escapeNotVerified */ echo $_attributeValue;
}
?>
</div>
<div class="less" style="display:none">
<?php echo $_subCategory->getDescription(); ?>
Lees minder
</div>
<script type="text/javascript">
console.log('test');
require(["jquery"],function($){
$('.readmore').on("click",function(){
$('.less').show();
$('.more').hide();
});
$('.readless').on("click",function(){
$('.less').hide();
$('.more').show();
});
});
</script>
</div>

This is because, when you type $('.less').hide(); this is grabbing every element with the attribute class='less'. This is the way I would overcome this:
Start by attaching a unique attribute to each <div class="more"> or <div class="less"> - in this case, we use the class attribute: (and move 'more' or 'less' to an id)
<div id="read-more-block" class="cat-<?php echo $_subCategory->getId(); ?>">
<!-- my "read more" content -->
<a class="link" href="#read-more-block">Read Less</a>
</div>
<div id="read-less-block" class="cat-<?php echo $_subCategory->getId(); ?>">
<!-- my "read less" content -->
<a class="link" href="#read-less-block">Read More</a>
</div>
We now have a read-more-block and a read-less-block for each subcategory. When we click the inside link a jQuery event should fire which will hide itself and display the other.
And then, in your jQuery:
$('#read-more-block .link').on('click', function() {
var $readLessBlock = $('#read-less-block.' + $(this).parent().attr('class'));
$readLessBlock.show(); //Show the read less block
$(this).parent().hide(); //Hide the read more block
});
..and vice versa for read less.

change main image by click left or right arrow or selecting actual image from thumbnail gallery in PHP

i'm developing a pdf book page viewer, i have many books that has more than 100 pages in my mysql database. so i fetch the book pages into my thumbnail gallery and if i select that image it will add img src to main image and display it on main image div, that works perfectly, here i have right and left arrow buttons next to main image, if i click these buttons the image should select next image or previous image. i was trying to get the idea and trying different source i could not get the output, please help me with this, i have added my codes bellow,
PHP
<button class="left-arrow" id="left-arrow">Left</buttom>
<img src="" alt="book" class="main-img" id="main-img">
<button class="right-arrow" id="right-arrow">Right</buttom>
<ul class="book-list id="book-list">
<?php if ($total_page > 0) : ?>
<?php foreach ($results as $row) : ?>
<li class="book p-2">
<span class="page-number"><?php echo $page_num++ ?></span>
<img src="<?php echo PAGE_URL . "/" . $b_id . "/" . $row->page_name ?>" alt="Book Image">
</li>
<?php endforeach ?>
<?php endif ?>
</ul>
JavaScript
<script type="text/javascript">
var bookPageList = $('#book-list');
$(bookPageList).click(displayImage);
function displayImage(e) {
if (e.target !== e.currentTarget) {
var target = e.target;
var src = target.src;
// console.log(src);
$('#main-img').attr('src', src);
}
}
</script>

I have fixed this issue in this link, hope this help to other newbies
Change image by selecting from thumbnail or next prev buttons

Adding and Removing class on clicks (in wordpress loop)

So I have a wordpress loop to show certain posts. Each posts has a modal that I'll show the in and each modal is triggered by the .modal-trigger class. However, because there are more than one posts I want to prevent the user from opening more than one modal at a time and this is why I want to remove the .modal-trigger class once it is clicked. I will then addClass the .modal-trigger once the .fa-close is clicked
my main objective is to remove the .modal-trigger class once it is clicked and add this class once the .fa-close class is clicked
<section class="meet-the-team">
<div class="inner">
<?php
$team = new wp_query (array(
'post_type' => 'team',
'orderby' => 'date',
'order' => 'ASC'
));
if($team->have_posts()):
while($team->have_posts()):
$team->the_post();
?>
<div class="team-section">
<p class="team-header"><?php the_title(); ?></p>
<p class="team-details"><?php the_field('person_job_title'); ?></p>
<button class="button modal-trigger ">Read More</button>
<!-- MODAL SECTION FOR READ MORE POSTS -->
<div class="my-Modal">
<i class="fa fa-close"></i>
<?php the_title(); ?>
<p><?php the_field('person_job_title'); ?></p>
<?php the_content(); ?>
</div>
<!-- ENDING OF MODAL SECTION -->
</div>
<?php
endwhile;
else: "no posts available" ;
endif;
wp_reset_postdata();
?>
my jquery
$(document).ready(function(){
$('.modal-trigger').click(function(){
var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
$('.button .modal-trigger').removeClass('modal-trigger');
});
$('.fa-close').click(function(){
$('.my-Modal').fadeOut().css('transform' , 'translate(0px , 5%)');
$('.button .modal-trigger').addClass('modal-trigger');
});
});
thank you for any help!

This won't work because your opening click removes the class you use to 'close' as well. Essentially, the following element you try to select doesn't exist anymore:
$('.button .modal-trigger').addClass('modal-trigger');
I'd go with a global variable that blocks all clicks when active, something like this:
$(document).ready(function(){
var hasActiveModal = false;
$('.modal-trigger').click(function(){
if(!hasActiveModal) {
hasActiveModal = true;
var post_content = $(this).parent('.team-section').find('.my-Modal').fadeIn().css('transform' , 'translate(0px , 15%)' );
return;
}
});
$('.fa-close').click(function(){
if(hasActiveModal) {
hasActiveModal = false;
$('.my-Modal').fadeOut().css('transform', 'translate(0px , 5%)');
return;
}
});
});
This way you keep track of an active modal, and only allow modals to be opened when there's no open modal, and close them when there's a modal open.

Pass the value when a <div> has onclick function and the data inside is changing dynamically

enter image description hereThis is my index_category.php.
<?php
include("db.php");
$sql="SELECT * from tcategory";
$conect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
while($rows= mysqli_fetch_array($conect, MYSQLI_ASSOC)){ ?>
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav()">
<div class="dialog-inner">
<?php echo $rows['cat_nm'];?>
</div>
</div>
<?php }
?>
This is the side nav to which I want to pass the data of div
<div id="mySidenav" class="sidenav">
<h3 class="sub"><i class="fa fa-arrow-right" aria-hidden="true"></i><strong> Sub Category</strong></h3>
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<script>
function openNav() {
$("#mySidenav").attr("style","width:250px");
var id=$(".dialog-outer").attr("data");
alert(id);
$.post('functions/sub_category.php',{id: id},function(data){
$('#result').html(data);
});
}
function closeNav() {
$("#mySidenav").attr("style","width:0px");
}
</script>
The problem is it is taking data=1 only but in network it showing as data=1 data=2 data=3 so on...
How to pass all the values from div in index_category.php to script in index.php
as u can see in the image i want to filter the sub category based on category. But when i click on any of the category it is taking only first value.But when u look in the image(inspect element) it is taking all the values as data=1 data=2 so on...when i click on category i want to get their respective id's.

If I understand correctly your your outer nav is repeated, that means that your $(".outer-nav") will return an array of elements not just one. You will need to iterate over them to read their data attributes. If you are looking to get just one specific one I would recommend using JQuery(since you are using it) selector for the click detection and from there working out the .outer-nav that you need.
Sorry if I did not understand your question correctly, but you use a weird mixture of pure JS and JQuery so it is a bit stange to read the code.

as #Aurus told, it is not only one element. You should modify like this:
===== 1st method =====
.... onclick="openNav(this)">
and the function too:
function openNav(element) {
...
var id=$(element).attr("data");
.....
}
===== 2nd method =====
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav('oid_<?php echo $rows['cat_id']; ?>')" id="oid_<?php echo $rows['cat_id']; ?>">
and the function too:
function openNav(id) {
...
var id=$("#"+id).attr("data");
.....
}

Refresh to show new/random taxonomy

I have an area on my Wordpress theme where I am showing info about a random taxonomy. Basically, the taxonomy is "playwrights" and I am featuring a random one on the home page. Here is the HTML:
<div id="home-top-right">
<?php
$allpw = get_terms( 'playwrights', 'hide_empty=0' );
$randpw = $allpw[ array_rand( $allpw ) ];
$randpw = get_term($randpw->term_id, 'playwrights');
$pwlink = get_term_link($randpw->term_id, 'playwrights');
?>
<div class="title">
Playwright Spotlight
<li class="fa fa-refresh refresh"></li>
</div>
<div class="content" id="p-spotlight">
<?php if (get_field('image', 'playwrights_'.$randpw->term_id)) { ?>
<div class="thumb">
<?php $imageid = get_field('image', 'playwrights_'.$randpw->term_id); ?>
<a href="<?php echo $pwlink; ?>">
<?php echo wp_get_attachment_image($imageid, 'pwthumb'); ?>
</a>
</div>
<?php } ?>
<div class="text">
<div class="sub-title">
<?php echo $randpw->name; ?>
</div>
<?php echo print_excerpt('', '200'); ?>
</div>
</div>
</div>
I want to be able to click a button (in the code, it is the <i> tag) and reload just that section (not the whole page) with a new random taxonomy term (playwright). I'm not great at JS/jquery and I'm not able to find a tutorial online that gets me where I need to go, especially considering the exchange between post data and the js function.
How should I go about this?

By default, WordPress has an admin-ajax.php file which you can send AJAX calls to. You can create a hook that is linked to your own custom function in which you can do the stuff you want, like getting the random term and send it back to the client.
Then you can pass a value to your AJAX call, called 'action'. When admin-ajax.php is getting a POST request with the action you 'hooked', your custom function is being executed.
Have a look at the links below for a more detailed explanation:
http://premium.wpmudev.org/blog/how-to-use-ajax-with-php-on-your-wp-site-without-a-plugin/
http://codex.wordpress.org/AJAX_in_Plugins