Onclick changer la largeur/position du DIV1 et DIV2

**elkhazak** · 23/10/2018, 18h13

Bonjour à tous,

Je voudrais savoir s'il serait possible en cliquant sur un bouton de contrôler la largeur d'un DIV1 et en même temps changer la position du DIV1 et DIV2 pour que je puisse avoir le résultat comme l'image ci-dessous :

Nom : rr.PNG
Affichages : 108
Taille : 10,5 Ko

Nom : rr.PNG
Affichages : 108
Taille : 10,5 Ko

Merci d'avance.

**Toufik83** · 23/10/2018, 19h20

tu cherches a avoir une vue adaptative sur un écran large (pc), moyen (tablette), petit (téléphone)? ou bien tu veux juste contrôler les div?

**elkhazak** · 23/10/2018, 19h32

Non juste de contrôler l'affichage des divs en cliquant sur le bouton.

**Toufik83** · 23/10/2018, 19h50

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
body {
  padding: 1em
}
 
.div,
.div1 {
  display: inline-block
}
 
.div {
  background-color: yellow;
  width: 49%
}
 
.div1 {
  background-color: green;
  width: 49%;
  height: 40px
}
 
.div.large,
.div1.large {
  display: block;
  width: 100%
}
 
.div.moyen,
.div1.moyen {
  display: inline-block;
  width: 49%;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="div moyen">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </table>
  <button>
Cliquez moi
</button>
</div>
<div class="div1 moyen">
 
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$('button').click(function() {
  if ($('.div').hasClass('moyen')) {
    $('.div,.div1').removeClass('moyen').addClass('large');
  } else {
    $('.div,.div1').removeClass('large').addClass('moyen');
  }
 
});

**elkhazak** · 23/10/2018, 20h09

Toufik stp peux tu me guider comment intégrer la biblio jquery dans le fichier et quelle version !

**Toufik83** · 23/10/2018, 20h20

entre dans ce site puis sous jQuery 3x, clique sur "uncompressed", une fenêtre popup s'affiche.
copie la balise script telle qu'elle est, et colle là dans la balise <head></head> de ta page, ta page doit être comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<!doctype html>
<html>
<head><title>Titre de la page</title>
<style>
body {
  padding: 1em
}
 
.div,
.div1 {
  display: inline-block
}
 
.div {
  background-color: yellow;
  width: 49%
}
 
.div1 {
  background-color: green;
  width: 49%;
  height: 40px
}
 
.div.large,
.div1.large {
  display: block;
  width: 100%
}
 
.div.moyen,
.div1.moyen {
  display: inline-block;
  width: 49%;
}
</style>
<!-- chargement de jquery !-->
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>
<script>
 
$('button').click(function() {
  if ($('.div').hasClass('moyen')) {
    $('.div,.div1').removeClass('moyen').addClass('large');
  } else {
    $('.div,.div1').removeClass('large').addClass('moyen');
  }
 
});
</script>
</head>
<body>
<div class="div moyen">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </table>
  <button>
    Cliquez moi
  </button>
</div>
<div class="div1 moyen">
 
</div>
</body>
</html>

Onclick changer la largeur/position du DIV1 et DIV2

jQuery

Vue hybride

Discussions similaires

Partager

Partager