What is the best way to conceal a div class while another one is displaying content?

Having an issue with Swiper slider and pagination that I want to hide if there is content in the caption division.

I've created a JSFiddle (http://jsfiddle.net/1sta65uv/2/) and done some research, but haven't found a solution yet. I know I need to use an if statement, but how do I link it to the length?

Could someone help me out? It would be much appreciated!

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption">Image caption</div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption"></div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption">Image caption</div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption"></div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

edit:

I want to hide the pagination when there is content in the caption for a dynamic page.

Which means:

Slide 1 has pagination
Slide 2 pagination hidden
Slide 3 has pagination
Slide 4 pagination hidden

jqueryhtmlcss

Answer №1

With every swipe, you have the ability to take action:

if($('.swiper-slide-active').find('.caption').html() != '') {
    $('.swiper-pagination').css('visibility', 'hidden');
} else {
    $('.swiper-pagination').css('visibility', 'initial');
}

EDIT - Initially, I assumed you wanted to hide the pagination when the caption contained content. However, it appears that your goal is to hide all captions instead. To achieve this after setting up the swiper:

$('.caption').css('visibility', 'hidden');

Alternatively:

$('.caption').html('');

UPDATE - If you specifically want to conceal captions with content, you can use the following approach:

$('.caption').each(function() {
    if ($(this).html() !== '') {
        $(this).css('visibility', 'hidden');
    }
});

Answer №2

To determine if the 'div.caption' contains HTML or to add a class to the div with content, you can follow this example:

    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption captionContent">Image caption</div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption"></div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption captionContent">Image caption</div>
    </div>
    <div class="swiper-slide">
      <img src="http://placekitten.com/500/300">
      <div class="caption"></div>
    </div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>

You can then use jQuery as shown below:

    //some event {
    if($('.caption').hasClass('.captionContent')){
        $(this).hide();
    }
}

This should help resolve your problem.

Answer №3

Give this a shot: Make some edits to your .js file

    var mySwiper = new Swiper('.swiper-container', {
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      pagination: '.swiper-pagination',
      paginationType: 'fraction'
    });

    mySwiper.on('slideChangeStart', function () {
    flag=$('.swiper-slide-active>.caption').html();
    if(flag!= "") {   
  $('.swiper-pagination').css('visibility', 'hidden');
} else {    
  $('.swiper-pagination').css('visibility', 'initial');
}
});

Answer №4

Big thanks to all of you! Finally got it to work. Also, I realized that I need to make sure the slider is updated after initialization.

var mySlider = new Swiper('.swiper-container', {
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  pagination: '.swiper-pagination',
  paginationType: 'fraction',
  'onInit': function() {
    var currentSlideContent = $('.swiper-slide-active>.caption').html();
    if (currentSlideContent !== "") {
      $('.swiper-pagination').css('visibility', 'hidden');
    } else {
      $('.swiper-pagination').css('visibility', 'initial');
    }
  }
});

mySlider.on('slideChangeStart', function() {
  var currentSlideContent = $('.swiper-slide-active>.caption').html();
  if (currentSlideContent !== "") {
    $('.swiper-pagination').css('visibility', 'hidden');
  } else {
    $('.swiper-pagination').css('visibility', 'initial');
  }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Securely safeguard auto-generated .html files with password protection

Incorporating the code from Tom's response found here, I have encountered an issue. My website has a script that automatically creates .html files in the public_html folder, which are then accessed by my .php file. The structure of the PHP file is sim ...

phphtml

What is the best way to open an already existing tab in Safari using an HTML 'a' link?

Is it possible to return to Safari after launching another app? <a href="webbrowserapp://example.com/open?url=http.....">Open WebBrowserApp</a> I've tried using: <a href="safari://">Return to Safari</a> It would be ideal if ...

javascripthtmliosiphoneipad

AngularJS is restricting the use of square brackets within the URL parameter, specifically the character '[.'

My goal is to connect to an external API Everything works smoothly when my parameters are set up like this $http.post('http://api.myprivatebox.com/users.json', { email : email, password : password}).then(function (results) { console.log( ...

javascriptphpjqueryangularjsangularjs-http

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

I have a dropdown with two options: Indian and Others. When I select Others, I want to display three textboxes - two with date pickers and one with a simple text input field. I have tried writing the following HTML code but I am unable to get the date pick ...

javascriptjqueryhtml

I am trying to include a vertical line both before and after the list tag. However, the first list tag is not displaying properly with the vertical

I encountered an issue where, despite adding a line using the "before" concept, the first list tag's left sideline is missing. The error output can be viewed here. The desired output should look like this: here Here is the HTML Code: <div cla ...

htmlcssbootstrap-4

prohibit magnifying glass from appearing on iOS 9 in a meteor cordova application

https://i.sstatic.net/jQOpS.jpg I have been experimenting with various solutions to get rid of the intrusive magnifying glass using CSS. Interestingly, on my iOS9 meteor cordova build, it still briefly appears and then disappears after a few milliseconds. ...

csscordovameteoraero-glassloupe

"Maximizing the slider with jCarousel: A guide to enhancing your carousel experience

I recently added jcarousel to my website and things are looking good so far. Take a peek at how my site is currently set up: check it out! What I'm aiming for now is a feature where if a user clicks on an image to enlarge, it will open in a new tab ...

javascriptjqueryhtmlcssimage

Displaying the tag, while transmitting the identification in jQuery

Currently, I am working on implementing an AJAX autocomplete feature. The concept involves dynamically rendering an HTML page next to the input box based on the search terms entered. When it comes to the HTML part, I'll be using Rails with :layout ...

jqueryruby-on-railsajax

Customize Typography style variations in Material-UI version 5

I have encountered a similar issue, but with a twist from Can't override root styles of Typography from Materil-UI Back in v4, I had a theme set up like this: import { createTheme } from '@material-ui/core/styles'; export const theme = cre ...

cssmaterial-ui

What is the best way to stack text boxes vertically in CSS/HTML?

How can I arrange these textboxes so that .textbox appears at the top, followed by textbox1 below? CSS .textbox { border: 1px solid #848484; -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: ...

csshtml

Sending formdata containing a file and variables via $.ajax

I've been working on a jquery file upload project based on a tutorial I found here: . The tutorial is great and the functionality works perfectly. However, I'm looking to add more control and security measures for user image uploads, such as inco ...

phpjavascriptjqueryajaxfile-upload

Troubleshooting Datatables and Laravel 4: Issues with Table Rendering and Ajax Error

Last night and today, I've been struggling with a Laravel 4.2 project that involves handling large tables with over 2000 records for some users. My goal is to utilize ajax functionality to retrieve data dynamically. Despite trying the PHP example from ...

phpjquerylaravel-4datatablesdatatables-1.10

Ways to transfer ID to a different HTML page

I have some Javascript code in a file named nextPage.js. When this code is executed by clicking on something, it should transfer the value of category_id to another page called reportlist.html. Can you please provide assistance with this? var base_url = " ...

javascriptjqueryhtmlajax

Decrease the transparency of the background image when scrolling, limit the minimum transparency allowed

I'm attempting to achieve a unique effect with the background image, where its opacity reduces on scroll to a minimum of 0.5 once it goes past the landing page. I've been using vanilla JavaScript for this purpose. I initially tried incorporating ...

javascriptcss

Comparing Flash and jQuery for RIAs development: Which tool reigns supreme and why?

Could someone clarify which technology is more suitable for developing rich internet applications: Flash or jQuery? Consider aspects like pros and cons, time, cost, and different scenarios. Please provide detailed explanations as it can be quite confusin ...

javascriptjqueryajaxflashactionscript

Selenium WebDriver: The challenge of using visibilityOfElementLocated when the element is not actually visible

I've encountered an issue with the Firefox Webdriver where it fails to accurately determine if an element is visible. Here is the code I am using, which incorrectly indicates that the element is visible: wait.ignoring(UnhandledAlertException.class).u ...

htmlcssseleniumselenium-webdriver

Adjusting the width of speech balloon in CSS

This question might seem basic to those who are familiar with CSS (unlike me lol). I'm currently working on incorporating speech balloons into my website using this code from jsfiddle. However, I encountered an issue when the text inside the balloon i ...

htmlcsscss-shapes

Animation using CSS that starts with a horizontal slide and transitions into a diagonal slide

Can I create an animation to move a graphic image on an html page from the middle of the screen to the top left corner? Here is what I have so far: #img1 {
 bottom: 50%;
 display: block;
 position: absolute;
 a ...

htmlcsscss-animations

Choose the initial unordered list within a specific division through Jquery

In a div, there is a ul. Inside a li, there is another ul. The task is to select only the first ul inside the div using jQuery. The HTML markup: <div class="parent"> <div class="clearfix"> <div class="another-div"> <ul cl ...

javascriptjqueryhtmlcss

Tips on enabling zooming for resizing an image and initially sizing it using vh/vw units

My issue involves having an extensive amount of code spread across various components (I'm using vue.js). Although I can't share all the code efficiently, I'll do my best to explain the situation clearly: I have a div that contains an image ...

htmlcssvue.js