Home>

[I want to achieve]
We are replicating the Airbnb website.
I would like to realize the following two behaviors when clicking a certain link.

(1) When the window size is 747px or less: Click the link to slide up the explanation.
② When the window size is larger than 747px: Click the link to display the explanation in a modal window.

[Current status and error content]
I implemented it because I thought it would be possible to use jQuery for slide up and Bootstrap for modal windows. However, in the case of ① above, the slide-up does not work, and the modal window works in all cases.
I want to be able to branch the JavaScript processing depending on the screen size. (When modal window works and when slide up works)
In the first place, I would appreciate if you could teach me if there is another way to write for responsive correspondence.

[Possible causes]
The cause is being investigated by debugging.
Javascript describes the operation when the window size changes,
For now, I'm guessing that part is not working well.

[Screen side]

<!-Click link start->     Who can be an Airbnb host?<!-Click link end-><!-Slidein description text start->            <i></i>         Who can be an Airbnb host?         <p>Except in some regions, getting started with Airbnb is very easy. Listings are free to create and publish. Condominiums, apartments, whole houses, private rooms, tree houses, castles, etc. are just examples of accommodation types listed on Airbnb.</p>        <p>For the detailed conditions required for the host, check the standards of the Airbnb community regarding safety, security, and reliability, and the standards of hospitality that summarizes the points for obtaining high evaluation reviews.</p><!-Slidein description end->    <!-Modal window start->                                                            <button type = "button" data-dismiss = "modal" aria-label = "Close">                        <span aria-hidden = "true">&times;</span>                    </button>                                                    Modal body
                                            <!-Modal window end->
$(window) .on ('load resize', function () {
    var winW = $(window) .width ();
    var devW = 747;
    if (winW<= devW) {
        // When screen size is less than tablet size
        $(document) .on ('click', '.s-o-b', function () {$(this) .next ('div'). slideDown ();
        });
        $(document) .on ('click', '.close-button', function () {
            $(this) .parent ('. slidein'). slideUp ();
        });
    } else {
        // When the screen size is larger than the tablet size
        // Add the attribute "data-toggle =" modal "data-target =" # modal1 "" to the s-o-b class (link to click),
// Make the modal window work when clicked
        $('. s-o-b'). attr ({
            'data-toggle': 'modal',
            'data-target': '# modal1'
        });
    }
});

【screen image】
  

Sites to be copied:
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1579409586_NDhhOTlmMzQ2MWU5  

【version】
jQuery 3.5.0

We apologize for the inconvenience, but we would appreciate if you could let us know.

  • Answer # 1

    I think you can do what you want to do by doing the following (link for operation check).

    
      <!-Click link start->
       Who can be an Airbnb host? 
      <!-Click link end->
      <!-slidein description start->
      
        <i></i>
         Who can be an Airbnb host? 
        <p>Except in some regions, getting started with Airbnb is very easy. Listings are free to create and publish. Condominiums, apartments, whole houses, private rooms, tree houses, castles, etc. are just examples of accommodation types listed on Airbnb.</p>
        <p>For the detailed conditions required for the host, check the standards of the Airbnb community regarding safety, security, and reliability, and the standards of hospitality that summarizes the points for obtaining high evaluation reviews.</p>
      
      <!-Description to slide in end->
      <!-Modal window start->
      
        
          
            
              <button type = "button" data-dismiss = "modal" aria-label = "Close">
                <span aria-hidden = "true">&times;</span>
              </button>
            
            
              Modal body
            
          
        
      
      <!-Modal window end->
    
    $(window) .on ('load', function () {
      $(". s-o-b"). on ("click", function () {
        var winW = $(window) .width ();
        var devW = 747;
        if (winW<= devW) {
          // When screen size is less than tablet size
          $(this) .next ('div'). slideDown ();
        } else {
          // When the screen size is larger than the tablet size
          // Make the modal window work when clicked
          $('# modal1'). modal ('toggle');
        }
      });
      $(". close-button"). on ("click", function () {
        $(this) .parent ('. slidein'). slideUp ();
      });
    });