TO - Additional Info Read More JS

Styling fixes to slider Block

Additional Info Read More JS

assets/css/style.css

@@ -222,6 +222,26 @@
     display: inline-block;
     left: 12px;
 }
+.wp-block-query.lsx-to-slider{position:relative;}
+.wp-block-query.lsx-to-slider .slick-arrow:before,
+.wp-block-query .slick-lightbox-inner .slick-arrow:before{ border-color: #000!important;
+height:30px; width:30px;}
+
+.wp-block-query.lsx-to-slider .slick-arrow,
+.slick-lightbox-inner .slick-arrow {cursor: pointer;
+  border-color: #000!important;height:30px; width:30px;}
+
+.wp-block-query.lsx-to-slider .slick-arrow.slick-prev:before,
+.wp-block-query .slick-lightbox-inner .slick-arrow.slick-prev:before{background: url('../img/left-arrow-dark.svg') no-repeat center center;
+  width: 20px;left: 3px;
+  height: 20px;}
+
+.wp-block-query.lsx-to-slider .slick-arrow.slick-next:before,
+.wp-block-query .slick-lightbox-inner .slick-arrow.slick-next:before{background: url('../img/right-arrow-dark.svg') no-repeat center center;
+  width: 20px;left: 3px;
+  height: 20px;}
+
+  .wp-block-query.lsx-to-slider .slick-slide{padding:15px!important;}
 
 .lsx-to-slider .slick-dots:not(.dropdown-menu) {
   align-items: center;
@@ -277,5 +297,131 @@
 .lsx-units-wrapper .hidden {
   display: none;
 }
+.wp-block-query.lsx-to-slider{gap: var(--wp--preset--spacing--small) var(--wp--preset--spacing--small);}
+
 /*# sourceMappingURL=style.css.map */
 
+/* Inner group for icon and label */
+.fast-facts-wrapper > .wp-block-group .wp-block-group:first-child {
+  display: flex;
+  align-items: flex-start; /* Align content in this group to the top */
+  gap: 5px; /* Space between icon and text */
+  flex-shrink: 0; /* Prevent group from shrinking */
+}
+
+/* Style the image icon */
+.fast-facts-wrapper > .wp-block-group .wp-block-image img {
+  width: 20px; /* Fixed width */
+  height: 20px; /* Fixed height */
+  display: inline-block;
+  object-fit: contain; /* Ensure image doesn't stretch or distort */
+}
+
+/* Styling for the label (e.g., "Special Interests:") */
+.fast-facts-wrapper > .wp-block-group .wp-block-group:first-child p {
+  margin: 0;
+  white-space: nowrap; /* Prevent wrapping for label */
+  vertical-align: middle; /* Align text with the middle of the icon */
+  line-height: 1.2; /* Improve readability */
+  display: inline-block; /* Keep text inline */
+}
+
+/* Styling for the flowing text */
+.fast-facts-wrapper > .wp-block-group .wp-block-group:last-child {
+  display: flex;
+  flex-wrap: nowrap; /* Keep the text flowing inline */
+  white-space: normal; /* Allow wrapping for text if it overflows */
+  overflow-wrap: break-word; /* Ensure long words wrap correctly */
+  word-break: break-word; /* Break long words when needed */
+  flex: 1; /* Allow the container to use available space */
+  align-items: flex-start; /* Ensure text starts at the top */
+}
+
+/* Specific styling for the text content */
+.fast-facts-wrapper > .wp-block-group .wp-block-group:last-child p {
+  white-space: normal; /* Allow wrapping for long text */
+  overflow-wrap: break-word; /* Break words when needed */
+  word-break: break-word; /* Break words on legacy browsers */
+  line-height: 1.4; /* Improve readability */
+  text-transform: capitalize; /* Capitalize text */
+  padding: 0; /* Ensure no unnecessary padding */
+  margin: 0; /* Remove extra margins */
+  display: inline; /* Ensure the text flows inline with the label */
+}
+
+.facilities-list li::marker{display:none;}
+.facilities-list{padding-left:0!important;}
+
+.facilities-list li {
+  margin-left: 10px;
+  list-style: none; /* Remove default list marker */
+  position: relative; /* Position for pseudo-element */}
+
+.facilities-list li::before{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%); /* Center the icon vertically */
+    width: 20px; /* Adjust the size of the tick icon */
+    height: 20px;
+    background-image: url('../img/tick.svg'); /* Replace with the path to your tick.svg */
+    background-size: contain;
+    background-repeat: no-repeat;
+    left:-28px
+}
+
+.additional-info .wp-block-group.content .read-more-btn,.additional-info .wp-block-group.content .read-less-btn{
+  color: #0073aa;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.additional-info .wp-block-group.content .read-more-btn:hover {
+  text-decoration: underline;
+}
+
+.additional-info .wp-block-group.content .read-less-btn{display:none;}
+
+@media (min-width: 800px) {
+.single-tour-operator .toggle-button {display:none;}
+}
+
+/* Optional: Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+
+  /* Styling for the toggle button */
+.single-tour-operator .toggle-button {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--wp--preset--color--contrast);
+}
+
+/* Styling for the SVG icons */
+.single-tour-operator .toggle-icon {
+  width: 16px;
+  height: 16px;
+  fill: var(--wp--preset--color--contrast);
+  margin-left: 5px;
+}
+
+/* Collapsed state for the second wp-block-group */
+.single-tour-operator section.wp-block-group .wp-block-group.collapsed {
+  display: none; /* Hide the content */
+}
+
+
+  .fast-facts-wrapper > .wp-block-group {
+    flex-wrap: wrap; /* Allow wrapping for better readability */
+    gap: 5px;
+  }
+
+  .fast-facts-wrapper > .wp-block-group .wp-block-group.is-layout-flex:last-child {
+    flex-wrap: wrap; /* Allow text to wrap on smaller screens */
+  }
+}

assets/js/src/custom.js

@@ -310,4 +310,45 @@ if ( window.location.hash ) {
 		lsx_to.build_slider_lightbox();
 	} );
 
-} )( jQuery, window, document );
+	document.addEventListener('DOMContentLoaded', function () {
+		const paragraphs = document.querySelectorAll('.additional-info .wp-block-group.content p');
+
+		paragraphs.forEach(function (p) {
+			const text = p.innerText.trim();
+
+			if (text.split(' ').length > 30) {  // Check if paragraph exceeds 30 words
+				const fullText = p.innerText.trim();
+				const truncatedText = fullText.split(' ').slice(0, 30).join(' ') + '...';
+				p.innerHTML = `<span class="truncated-text">${truncatedText}</span><span class="full-text" style="display: none;">${fullText}</span>`;
+
+				// Create Read More button
+				const readMoreBtn = document.createElement('span');
+				readMoreBtn.textContent = ' Read More';
+				readMoreBtn.classList.add('read-more-btn');
+				p.appendChild(readMoreBtn);
+
+				// Create Read Less button
+				const readLessBtn = document.createElement('span');
+				readLessBtn.textContent = ' Read Less';
+				readLessBtn.classList.add('read-less-btn');
+				p.appendChild(readLessBtn);
+
+				// Add functionality to toggle text
+				readMoreBtn.addEventListener('click', function () {
+					p.querySelector('.truncated-text').style.display = 'none';
+					p.querySelector('.full-text').style.display = 'inline';
+					readMoreBtn.style.display = 'none';
+					readLessBtn.style.display = 'inline';
+				});
+
+				readLessBtn.addEventListener('click', function () {
+					p.querySelector('.truncated-text').style.display = 'inline';
+					p.querySelector('.full-text').style.display = 'none';
+					readMoreBtn.style.display = 'inline';
+					readLessBtn.style.display = 'none';
+				});
+			}
+		});
+	});	
+
+} )( jQuery, window, document );